We should look into trying to minimize the impact of loading in the Lottie animation as much as possible. There are some nice tools that help minimize these like lottie-files-min-tool or https://github.com/SJunWah/lottie-file-optimizer
[x] add a .min.json of the hero-animation (always keep original for high fidelity)
[x] Update hero animation component to use .min file
Figma / Designs
Should look the same as today. However, it might drop a bit in fidelity. We'll need to make a call if we're okay with that for the increase in loading speeds.
Crazy Idea
We could see if we could make an animation that sits over top the image. This would probably be hard since this has depth... but it would help the loading a lot so we just load the image and then dynamically pull in an animation that is just the moving parts.
Description
Related to https://github.com/estuary/marketing-site/issues/298
We should look into trying to minimize the impact of loading in the Lottie animation as much as possible. There are some nice tools that help minimize these like
lottie-files-min-tool
orhttps://github.com/SJunWah/lottie-file-optimizer
Work required
.min.json
of the hero-animation (always keep original for high fidelity).min
fileFigma / Designs
Should look the same as today. However, it might drop a bit in fidelity. We'll need to make a call if we're okay with that for the increase in loading speeds.
Crazy Idea
We could see if we could make an animation that sits over top the image. This would probably be hard since this has depth... but it would help the loading a lot so we just load the image and then dynamically pull in an animation that is just the moving parts.