Review UI issues from Mustafa

[jakearchibald]

#172 (comment)

[developit]

From @mustafa-x:

A couple of points;

• The toggle button needs to alternate the icon (should be in the sketch file) and perhaps colour so it feels more like a switch
• we need a better preloader, because it isn't clear that the image is loading.
• I think the buttons would look better in the same black perhaps as the settings. Maybe we should dial down the blue for the divider as well.
• found a bug where if I kept changing the image file type before it was process it would flag this error;

• It would be nice for a way to hide all of the UI, maybe a shortcut key perhaps or button, in photoshop, pressing tab allows you to do this so all panels hide from view. - tried to download an image but flagged an error, would let me download afterwards though;

• here is the error message from console;
  index.tsx:208 Error: RuntimeError: float unrepresentable in integer range
  RuntimeError: float unrepresentable in integer range
  at /wasm-function[398]:1480
  at /wasm-function[368]:3781
  at /wasm-function[186]:33
  at /wasm-function[194]:3585
  at /wasm-function[367]:320
  at /wasm-function[365]:192
  at /wasm-function[339]:119
  at /wasm-function[340]:182
  at /wasm-function[282]:20
  at dynCall_viiiii_9 (eval at (820fb28865f383a11a55.worker.js:1), :4:12)
  at /wasm-function[398]:1480
  at /wasm-function[368]:3781
  at /wasm-function[186]:33
  at /wasm-function[194]:3585
  at /wasm-function[367]:320
  at /wasm-function[365]:192
  at /wasm-function[339]:119
  at /wasm-function[340]:182
  at /wasm-function[282]:20
  at dynCall_viiiii_9 (eval at (820fb28865f383a11a55.worker.js:1), :4:12)
  at Object.deserialize (comlink.es6.js:33)
  at u (comlink.es6.js:148)
  at comlink.es6.js:53
  t.source.i.encoderState.e.encoderState.updateImage.catch.e @ index.tsx:208
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4
  imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ imagequant.js:4
  imagequant.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ imagequant.js:4
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4
  imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ imagequant.js:4
  imagequant.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ imagequant.js:4
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4
  imagequant.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ imagequant.js:4
  imagequant.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ imagequant.js:4
  mozjpeg_enc.js:4 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  (anonymous) @ mozjpeg_enc.js:4
  mozjpeg_enc.js:4 falling back to ArrayBuffer instantiation
  (anonymous) @ mozjpeg_enc.js:4

[developit]

toggle button: which one, "toggle background"?

preloading UI: I was thinking a spinner for each side? or we could just use a brightly coloured indeterminate progressbar hugging the top of the viewport. I threw one together here:
http://jsfiddle.net/developit/nz1robh3/

black buttons: agreed. the UI with all dark buttons would resemble a darkroom, which seems pretty fitting. For the divider, would you want to keep it blue toned, or just move it to straight gray? we actually built it out as grey and it's manually restyled here to be blue.

bugs: both bugs should be gone once we land worker termination. the download bug was just a result of the earlier bug you mentioned.