loading animation/s

[lottiecoxon]

Initially @clarkus's suggestion of creating a more interesting loading sign for the app + ideas from @corywatilo = (hopefully) a cool outcome made by me...

For smaller loading spaces such as mobile/ small frames we will aim to have a logo themed loading animation. The shape and colours are recognisable even when scaled down and will make for an interesting geometric animation.

For the larger loading spaces such as loading a query on desktop (which can sometimes take a few seconds) Cory had the idea to 'delight' users by giving them an animation of a hedgehog doing something technical - eg rapidly typing on a computer and keys flying off. To add to this every now and again (maybe every release) I could create another animation for this, meaning that every time a query loads the user is shown something different. Over time this could be a really good way of entertaining users. (as well as filling blank space and more importantly time in-between loads)

[corywatilo]

I'm going to remove this from the W&D sprint plan (since this is more app-related, but it would be great if we can still pick this up!)

[lottiecoxon]

Loading Animations

Larger Loading State

Running Tech Hedgehog

https://user-images.githubusercontent.com/65415371/167866550-70293af0-192f-41f6-b36a-2994d0ebe8d8.mov

Smaller Loading State

(first draft)

I took the shapes found within the logo and thought of a fun balancing composition. The colours are not decided on yet - it could adopt the real logo colours?

[lottiecoxon]

[clarkus]

I really like the idea of the logo morphing into other objects. An idea to explore might be to reuse the colors and not the shapes to come up with a spinner. If things are built in SVG / vector, we could animate the shape changes. I like this idea a lot!

[lottiecoxon]

So I ran with the idea of morphing the logo into something but...

It looks weird, and a little retro and gamey?

So! I went back to what works at the moment

Our current spinner feels a little too chunky and I thought to let it breath I would turn the spinner into a circle of dots. Over a few experiments I feel that a more oval shape feels more modern and fresh - also paired with a bunch of colours.

https://user-images.githubusercontent.com/65415371/168583288-780b951c-b677-43a3-ac6e-8f555f1b15a1.mov

Finally some hedgehog animations

These are to be placed in the bigger loading spaces when things take a bit of time. Transitioning between 3 hedgehogs - one working out, one listening to music and the last looking confused at a laptop. My aim is to over time add to these and continue to spark joy!

https://user-images.githubusercontent.com/65415371/168583800-fd13f5a2-6579-4d9c-ad4a-131ba16e1742.mov

[clarkus]

Love the exploration. I personally prefer the hedgehogs. Maybe we can reserve the smaller spinners for those cases where they're shown inline?

[lottiecoxon]

I was under the understanding that the spinners would be for the super small spaces that needed a loading icon?

[mariusandra]

These are really cool!

There's still this technological and organisational question, for which I don't have the answer: how do we actually show them in the app?

We currently have a very nice story on getting static images from Figma into the app, but not so for movies and animation. Ideally design would give engineering a file that's just "plug and play". But what format should that "file" be?

The hedgehog animation above is a 5MB movie, and the spinner is a 1.2MB file. That's not that much, but it's still a chunky asset on the web.

In contrast, the current spinner is about 2KB of code (0.002MB) and looks like this:

// css
.Spinner {
    animation: spin 1s infinite linear;
    display: block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--primary);
    transition: color 100ms ease;
    .Spinner__trace,
    .Spinner__overlay {
        display: block;
        fill: transparent;
        stroke: currentColor;
        stroke-width: 8px;
        transform-origin: center;
    }
    .Spinner__trace {
        opacity: 0.25;
    }
    .Spinner__overlay {
        animation: writhe 1.2s infinite ease both;
        stroke-linecap: round;
        stroke-dashoffset: -30;
        stroke-dasharray: 60;
    }
    &.Spinner--inverse,
    .LemonButton--primary & {
        color: #fff;
    }
    &.Spinner--sm {
        width: 1rem;
        height: 1rem;
    }
    &.Spinner--lg {
        width: 4rem;
        height: 4rem;
    }
}

@keyframes writhe {
    0% {
        stroke-dashoffset: -40;
        stroke-dasharray: 50;
    }
    50% {
        stroke-dashoffset: -30;
        stroke-dasharray: 70;
    }
    100% {
        stroke-dashoffset: -40;
        stroke-dasharray: 50;
    }
}

// html (inside some javascript)
export function Spinner({ size = 'md', type = 'primary', traceless = false, style }: SpinnerProps): JSX.Element {
    return (
        <svg
            className={clsx('Spinner', size && `Spinner--${size}`, type && `Spinner--${type}`)}
            style={style}
            viewBox="0 0 48 48"
            xmlns="http://www.w3.org/2000/svg"
        >
            {!traceless && <circle className="Spinner__trace" cx="24" cy="24" r="20" />}
            <circle className="Spinner__overlay" cx="24" cy="24" r="20" />
        </svg>
    )
}

Basically, we build a svg circle with a dotted line as its pattern, and then make it spin and pulsate via CSS animations.

This is the most compact way of animating things, and makes sense for a loading spinner that should load before anything else: you describe the visual effect you want to achieve through simple graphical primitives and some CSS animations/keyframes that manipulate their properties.

The code above won't work for Lottie's 8-color spinner, as we likely need 8 independently colored objects, not one round circle with a dot pattern on its border. Or perhaps we can use a gradient as the color of the circle's border. I'm not sure, but this will take from an hour to half a day of work for a frontend engineer to get right.

That's still half a day of work, that comes at the expense of something else. So I have a hard time seeing someone jump in and volunteer to implement this :(.

This "css + svg + html" style will work for simple animations, but I think you will go crazy if you would implement the jumping hedgehogs as CSS + SVG animations. It's doable, but a huge undertaking (imagine 20x as much CSS that you need to make sense of). Thus it's not practical.

We could just embed the video, but perhaps there's some better way?

I know there's Lottie by Airbnb and its react-lottie counterpart (and LottieFiles online service?) that we could use.

That's about 250kb of code for the animation player, and compact files for the animations themselves. I think this could work well, but are there better ways or tools?

Ideally we should do as much upfront work as needed, so that design could start handing engineering files that we could just integrate and play directly, to avoid spending half a day of writing custom CSS animations... 🤔

[mariusandra]

Had a try at integrating lottie-react and copied a random hedgehog:

[mariusandra]

@lottiecoxon what software do you currently use to make these animations?

Lottie, the app, requires you to use their Adobe After Effects plugin. Is this something you could use or switch to?

There's also an option to convert a svg to lottie and then use their editor to edit it online.

You can also add LottieFiles to Figma.

...

Finally, here's a draft PR where I add some hedgehogs to the posthog app:

You can view the example directly in storybook here: https://61260360a8e859003a7c138b-qzxsnpkvgo.chromatic.com/?path=/story/scenes-app-insights-error-states--timeout-state

[lottiecoxon]

Okay so, concerning the lottie app I have tried (for about a whole day) to try work out why it won't export properly BUT am happy to give it another crack using shape layers built in Adobe illustrator. Seeing as I already have the animation points set out with the pixel version it shouldn't take too long to recreate it in svg form.

For the moment I need to build each character out in shapes and layers and hopefully we will be progressing here v soon !

Concerning the CSS animation - this is really cool and good to know, at some point it would be good to pair with you on this and discuss potential options to gain insight to what would work and what wouldn't. Happy to look into CSS animation in the mean time while you are away to try crack it myself

[lottiecoxon]

AH ha finally I have cracked lottiefiles - I have only one more hedgehog animation to finish but the first two are ready to be uploaded. Also we have the smaller logo based animation ready to go- is it worth putting these handoff links in this issue?

[corywatilo]

let's see em

[lottiecoxon]

Sports Hog

https://lottiefiles.com/share/7eabudqj

Laptop Hog

https://lottiefiles.com/share/juqtjg2b

Music Hog

https://lottiefiles.com/share/vdnwmbdh

Small logo animation

https://lottiefiles.com/share/r8yzhfa0

[mariusandra]

I can't help but think that the logo is giving me the finger 🤣

So I didn't include this in the work described below 😅.

That said, these are great! I polished up my PR with the required scaffolding, added the animations, replaced the ones I originally used... and I think we're good to go. Once that lands, we can basically treat these lottiefile animations as images with regards to how easy it is to use them.

Here are all the animations in the system now (or, well, very soon): https://61260360a8e859003a7c138b-uxsuryabfd.chromatic.com/?path=/docs/layout-animations--animations

😍

---

Something else to keep an eye on when working with Lottiefiles is the filesize here:

All three hedgehogs seem to be hitting the 400kb mark. I don't know if that's good or bad, but seems reasonable. Just in case, keep an eye on this that e.g. if you design a new similar animation, it's suddenly 5x bigger or so.

[EDsCODE]

@posthog-bot please summarize this!

[posthog-contributions-bot[bot]]

@EDsCODE

The conversation revolves around loading animations for PostHog. The participants discuss different design ideas, including morphing the logo into another object, using a circle of dots as a loading spinner, and incorporating hedgehogs into larger loading spaces. They also consider different ways of implementing animations in the app, including using CSS and SVG animations, Lottie by Airbnb, and static images. The discussion includes technical considerations such as file size and embedding the animations in the app. Ultimately, the group decides to use Lottie animations for the hedgehogs and logo-based loading animation. Several handoff links to finished animations are shared.

[Twixes]

I feel like the current query loading bar is actually a pretty good experience Will close for now