flekschas/piling.js

Add a static placeholder for async rendered images

Closed this issue · 0 comments

Currently, while an aggregate is rendered we show nothing, which is rather confusing when the rendering takes a few seconds.

To indicate that the library didn't crash but is busy rendering we should show an intermediate image.

My suggestion is this: let's take the image that was added last to the pile, desaturate it, darken/brighten it by 50%, blur it a little bit, and draw an indicator above it.

E.g., when in dark mode, a photo should change from

normal

to

loading

The desaturation, darkening, and blurring can be done efficiently with PIXI. For the indicator, we can create a texture of three dots and add it as a sprite to the pile item that is in the loading/rendering state.

@eeeeenchanted Can you get started with the indicator? I can add the PIXI filters.