Lottie and check update

[AlinaGoaga]

Closes #1905
Closes weaveworks/weave-gitops-enterprise#578

What changed and why?

• replaced SignIn svg background with Lottie animation (improved performance on Firefox)
• the Error page now uses a Lottie animation as well - improve user experience (we used to have text only)
• improve feedback to user whilst the FeatureFlags are being retrieved / if they error out

[foot]

ewq:~/weave/weave-gitops(main $%=)$ npm run build

> @weaveworks/weave-gitops@0.7.0-patch1 build
> parcel build --target default

✨ Built in 34.15s

cmd/gitops-server/cmd/dist/index.html                                417 B     3.84s
cmd/gitops-server/cmd/dist/gitops-LOGO.4e557fcc.ico              201.34 KB     1.08s
cmd/gitops-server/cmd/dist/index.2f1bd790.js                    ⚠️  1.5 MB    15.02s
cmd/gitops-server/cmd/dist/ProximaNovaBold.87676319.otf           94.38 KB     1.07s
cmd/gitops-server/cmd/dist/ProximaNovaRegular.91a8c864.otf        92.45 KB     1.07s
cmd/gitops-server/cmd/dist/ProximaNovaSemibold.7fa90ba1.otf       89.75 KB     1.07s
cmd/gitops-server/cmd/dist/roboto-mono-regular.b5d84859.woff       19.5 KB     1.06s
cmd/gitops-server/cmd/dist/index.780a4a15.css                      7.82 KB     4.23s

ewq:~/weave/weave-gitops(main $%=)$ git co -

ewq:~/weave/weave-gitops(lottie-and-check-update $%=)$ npm run build

> @weaveworks/weave-gitops@0.7.0 build
> parcel build --target default

✨ Built in 24.65s

cmd/gitops-server/cmd/dist/index.html                                 417 B     2.55s
cmd/gitops-server/cmd/dist/gitops-LOGO.4e557fcc.ico               201.34 KB     1.08s
cmd/gitops-server/cmd/dist/index.49a3208f.js                    ⚠️  2.52 MB    12.28s
cmd/gitops-server/cmd/dist/ProximaNovaBold.87676319.otf            94.38 KB     1.07s
cmd/gitops-server/cmd/dist/ProximaNovaRegular.91a8c864.otf         92.45 KB     1.07s
cmd/gitops-server/cmd/dist/ProximaNovaSemibold.7fa90ba1.otf        89.75 KB     1.07s
cmd/gitops-server/cmd/dist/roboto-mono-regular.b5d84859.woff        19.5 KB     1.06s
cmd/gitops-server/cmd/dist/index.780a4a15.css                       7.82 KB     4.23s

The bundle size jumped up 1mb?! .. its a bit funky. Maybe we could quickly test out lazy loading the animation as in https://github.com/mifi/react-lottie-player#lazy-loading-example to see if that has an impact?

[AlinaGoaga]

Good point, I hadn't checked that. It doesn't look that there's a prop for that, I've implemented the suggestion from mifi/react-lottie-player#11. npm run build finished in 38s for the latest main and 33s for the branch for me. Total size still not reduced by a lot though

[foot]

Awesome! Thanks for trying this out. That is super odd, will have a quick poke..

[foot]

Could try the bundle analyzer on it to see whats taking up all the space? 🤔

https://parceljs.org/features/production/#bundle-analyzer

[foot]

Lotti is 650kb and the error404 is 200kb

[foot]

Maybe the json won't be correctly bundled into the lib tho 🤔 ... really need to find a better way..

[AlinaGoaga]

Will reopen a new branch