Loading Animation

[lottiecoxon]

IDEA 01

Computer Screen turns on, shows loading screen and fun little animation then switches off.

IDEA 02

Plain and simple retro loading screen - bold and minimal.

IDEA 03

This artistic concept is a louder approach, I was thinking of having a view of the ground to sky with clouds, a rocket and some tech

IDEA 04

This idea revolves around a line of blocks that stretch and shrink to create different graphs and funnels shapes.

https://user-images.githubusercontent.com/65415371/104302588-e194a000-54c0-11eb-9896-970cfdc0468f.mov

IDEA 05

Here we could have a rocket moving along a loading line.

IDEA 06

This is is just a more interesting version of the loading sign - reminds me more of retro video games loading screens

IDEA 07

Using dots to represent code - colourful and lots of movement

IDEA 08

Typographical outcome

[lottiecoxon]

INSPIRATION

[lottiecoxon]

SUPER ROUGH MOVEMENT EXPERIMENT

[lottiecoxon]

STORY BOARD

[paolodamico]

My 2c, I like the one you've built and Idea 5 too (I think this one could be pretty cool, imaging it like the blueprints of rocket forming progressively?).

One key feature I think we should consider here (and the reason I like those two options) is that these loading spinners work well in all sorts of contexts (and backgrounds). So for instance, something like Option 3 might be hard to make it work everywhere. Or something like Option 2 might not be best for all contexts (e.g. might look weird when loading a graph, as it's more like a progress bar, instead of an indefinite loading indicator).

[lottiecoxon]

work in progress - with this fluctuating block design it could run for a while on loop, while also embodying what PostHog does - visual data analytics https://user-images.githubusercontent.com/65415371/104328995-54634280-54e4-11eb-9b8c-28fb6e037ed5.mov

[corywatilo]

Big fan of #5 and #6.

5: The starry sky looks mysterious, almost like you're entering a new world or scene of a video game. I'd be curious to see a few more stars, maybe some twinkling, and maybe a shooting star or two! My only concern is if you're on a page in the app with a white background, for the entire screen to then flip over to this dark scene while the page loads. (I think sort of @paolodamico's 2nd point.)

6: Strictly visually-speaking, I love the glow and gradient. It adds a lot of depth. I don't feel like I've seen a lot of "wavy" loading animations, but I don't know why not because this feels awesome.

[lottiecoxon]

Maybe we could do something like a navy gradient falls over the screen - it is a a night sky, with 8 bit star squares twinkling and a rocket ship/shooting star + a white wavey loading sign appears and then when the white product page is loaded the gradient goes back up the screen to reveal a white page of products.

I will mock up a basic story board of this now to explain it

[EDsCODE]

Agree with the points above. Additionally, something that struck me while looking at #4 and some of the variants you posted in the following comments is that we could orient the loading shapes per graph.

If these bars popped up in a vertical direction, they would look like trends graphs. If they swiped out horizontally like in #4, it would fit a funnel shape.

[lottiecoxon]

That's such a good point! We have lots of avenues we could go down

[lottiecoxon]

[lottiecoxon]

[corywatilo]

How long do we anticipate these loaders being on screen?

As much as I love the dark sky concept, I worry what will happen when the loading doesn't take long enough to really make it worth it.

Digging the idea of having loaders that match the analysis mode. They we can just use a standard one for everywhere else.

Do we need to have it be full screen (is that the idea here with the blue background, like as a modal background almost?) or are we planning on just dropping the loader inside the div where data will be loaded?

As we develop our visual style, we may want to swap the shade of blue with something else, so as long as we can easily change that later, I think this is generally a good route. (Do we have the capabilities of making an SVG animation out of these?)

[mariusandra]

I'm not sure where these animations should go, but if to replace the current spinners, then they definitely shouldn't be full screen. Imagine a chart takes forever to load and you can't even click away while waiting. :)

[paolodamico]

Well most of the time you would expect this loader to show for 1-2 secs at the most. However when running complex queries, this can take up to 15 secs (see https://github.com/PostHog/posthog/pull/2876), so having a nice animation could certainly take out the sting of waiting for longer times.

I also forgot to mention that I think it's important to consider that in a lot of places in the app we use the skeleton loader, so it'd be good that whatever loader indicator we come up with interacts well with this loader too.

[mariusandra]

There are three types of loaders that I've seen and they are good for different cases.

• In place - e.g. a quick spinner where the graph, a table or a new page should appear
• Full screen - mostly used for "the app is loading" screens
• Skeleton - originally popularised by Facebook

I think that apps which use full screen loaders are user hostile, because they're written with crappy technologies that force them to display a loading screen instead of already showing part of the interface. Luckily we don't have that problem. These designs above are really cool, though I don't see where we would actually use them.

Skeleton loaders are great and make the page feel fast (it tricks your brain into thinking the page was always there somehow), yet they're quite dull and only good for small elements and if they load within a second. Afterwards they feel stuck. Regular loaders are for everything else.

What we need most right now is a nice regular loader. We're actively working on adding this "sorry, it's taking way too long" screen to the insights charts (see first gif, issue: https://github.com/PostHog/posthog/pull/2876 ), and it could be spiced up.

I like these dancing boxes:

... and @EDsCODE 's idea of them being different for different chart types. That's sort of like a cross between the skeleton and regular in place loaders.

[lottiecoxon]

Making the spinner smaller within a box would be easier for me! plus with the blocks the background colour doesn't need to be changed as the blocks can be coloured.

I feel like that is the decision made then - I will work on the second design idea (smaller without a background)

[lottiecoxon]

[timgl]

It looks very cool but it's quite a lot. I think it could be one of these motions just repeated over and over.

personally I think I like the first one (though hard to tell!)

[charlescook-ph]

Similar to Tim, but for me I like all of it just minus the circular bit? The rest kind of flows in a nice zen way if it was a bit slower.

[lottiecoxon]

True it is a lot of movement + the circle part really throws it off a bit - maybe I could cut and change it up and give some options of length and visuals

[mariusandra]

I made it slower (0.5x) and removing the circle:

It feels much nicer, though it could be a bit smoother and I'd rework the sharp collapse in the end. I guess the feeling I would go for is a mesmerising zen experience that makes you wish the chart loads even longer... :D

[charlescook-ph]

This is nice! I agree on the sharp collapse at the end, but otherwise it's cool

[lottiecoxon]

On it !!

[lottiecoxon]

https://user-images.githubusercontent.com/65415371/104582224-85b04f80-5657-11eb-8694-66ec0b1bdec3.mov

[charlescook-ph]

I feel very relaxed after watching that...

Not a coder, but is there some sort of issue if the loading animation itself is 19s long and takes too long to, um, load? (I have always wondered how long a loading screen takes to load generally...)

[mariusandra]

Feels nice! My only feedback would be to remove the slight delays between the different stages of the animation (in the end) and to make it buttery smooth. Suave if you will.

Echoing @piemets 's point, how do we actually put this in the app? A 1+MB gif is too much for a loading animation. Someone should convert this to a bunch of divs and make them move with CSS animations. Any volunteers?