lol this was meant to be 10 seconds.

* Avoid wrapping a single button

* Making the zoom controls appear on the bottom, when the controls are positioned on the bottom

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",

src/codecs/processor.ts

@@ -20,7 +20,7 @@ import * as browserPDF from './browser-pdf/encoder';
 type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
 
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 1000;
+const workerTimeout = 10000;
 
 interface ProcessingJobOptions {
   needsWorker?: boolean;

src/codecs/rotate/processor.ts

@@ -4,10 +4,6 @@ const bpp = 4;
 
 export function rotate(data: ImageData, opts: RotateOptions): ImageData {
   const { rotate } = opts;
-
-  // Early exit if there's no transform.
-  if (rotate === 0) return data;
-
   const flipDimensions = rotate % 180 !== 0;
   const { width: inputWidth, height: inputHeight } = data;
   const outputWidth = flipDimensions ? inputHeight : inputWidth;

src/components/Output/index.tsx

@@ -336,19 +336,21 @@ export default class Output extends Component<Props, State> {
               <AddIcon />
             </button>
           </div>
-          <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
-            <RotateIcon />
-          </button>
-          <button
-            class={`${style.button} ${altBackground ? style.active : ''}`}
-            onClick={this.toggleBackground}
-            title="Change canvas color"
-          >
-            {altBackground
-              ? <ToggleBackgroundActiveIcon />
-              : <ToggleBackgroundIcon />
-            }
-          </button>
+          <div class={style.buttonsNoWrap}>
+            <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
+              <RotateIcon />
+            </button>
+            <button
+              class={`${style.button} ${altBackground ? style.active : ''}`}
+              onClick={this.toggleBackground}
+              title="Change canvas color"
+            >
+              {altBackground
+                ? <ToggleBackgroundActiveIcon />
+                : <ToggleBackgroundIcon />
+              }
+            </button>
+          </div>
         </div>
       </div>
     );

src/components/Output/style.scss

@@ -36,6 +36,8 @@
   // We should try to remove this once the issue is fixed.
   // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
   will-change: auto;
+  // Prevent the image becoming misshapen due to default flexbox layout.
+  flex-shrink: 0;
 }
 
 .controls {
@@ -62,6 +64,7 @@
     left: 320px;
     right: 320px;
     bottom: 0;
+    flex-wrap: wrap-reverse;
   }
 }
 
@@ -152,3 +155,12 @@
   left: 0;
   padding: 9px;
 }
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}

src/components/compress/index.tsx

@@ -85,12 +85,18 @@ interface UpdateImageOptions {
   skipPreprocessing?: boolean;
 }
 
-function processInput(
+async function processInput(
   data: ImageData,
   inputProcessData: InputProcessorState,
   processor: Processor,
 ) {
-  return processor.rotate(data, inputProcessData.rotate);
+  let processedData = data;
+
+  if (inputProcessData.rotate.rotate !== 0) {
+    processedData = await processor.rotate(processedData, inputProcessData.rotate);
+  }
+
+  return processedData;
 }
 
 async function preprocessImage(