Remove raceyness of getter API

lul/index.html

@@ -12,13 +12,12 @@ const squoosh = Comlink.proxy(ifr.contentWindow);
 async function load() {
   const blob = await fetch("/profile.jpg").then(resp => resp.blob());
   await squoosh.setFile(blob);
-  console.log('done')
+  extract();
 }
 document.all.load.onclick = load;
 
 async function extract() {
   const file = await squoosh.getBlob(1);
-  console.log('asdf', file)
   const url = URL.createObjectURL(file);
   const img = document.createElement('img');
   img.src = url;

src/components/App/index.tsx

@@ -108,12 +108,16 @@ export default class App extends Component<Props, State> {
   private exposeAPI() {
     const api = {
       setFile: (blob: Blob, name: string) => {
-        this.setState({ file: new File([blob], name) });
+        return new Promise((resolve) => {
+          this.setState({ file: new File([blob], name) });
+          document.addEventListener('squooshingdone', () => resolve(), { once: true });
+        });
       },
       getBlob: async (side: 0 | 1) => {
         if (!this.state.file || !this.compressInstance) {
           throw new Error('No file has been loaded');
         }
+        await this.compressInstance.compressionJobs[side];
         return this.compressInstance.state.images[side].file;
       },
     };

src/components/compress/index.tsx

@@ -205,6 +205,7 @@ const originalDocumentTitle = document.title;
 
 export default class Compress extends Component<Props, State> {
   widthQuery = window.matchMedia('(max-width: 599px)');
+  compressionJobs: [Promise<void>, Promise<void>] = [Promise.resolve(), Promise.resolve()];
 
   state: State = {
     source: undefined,
@@ -305,7 +306,7 @@ export default class Compress extends Component<Props, State> {
       // The image only needs updated if the encoder/preprocessor settings have changed, or the
       // source has changed.
       if (sourceDataChanged || encoderChanged || preprocessorChanged) {
-        this.queueUpdateImage(i, {
+        this.compressionJobs[i] = this.updateImage(i, {
           skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
         });
       }
@@ -489,7 +490,9 @@ export default class Compress extends Component<Props, State> {
       loading: true,
     });
 
-    this.setState({ sides });
+    this.setState({ sides }, () => this.base!.dispatchEvent(
+      new CustomEvent('squooshingdone', { bubbles: true }),
+    ));
 
     const side = sides[index];
     const settings = side.latestSettings;