Add Custom Loading Animation

Author: blessedcoolant

invokeai/frontend/web/package.json

@@ -86,6 +86,7 @@
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
     "react-konva": "^18.2.10",
+    "react-lottie": "^1.2.4",
     "react-redux": "9.1.0",
     "react-resizable-panels": "^2.0.11",
     "react-select": "5.8.0",
@@ -125,6 +126,7 @@
     "@types/node": "^20.11.20",
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.19",
+    "@types/react-lottie": "^1.2.10",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "concurrently": "^8.2.2",

invokeai/frontend/web/pnpm-lock.yaml

@@ -1,23 +1,24 @@
-import { Flex, Image, Spinner } from '@invoke-ai/ui-library';
-import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
+import { Flex } from '@invoke-ai/ui-library';
+// import AnimatedVideoSpinner from 'public/assets/videos/LogoAnim.webm';
 import { memo } from 'react';
+import Lottie from 'react-lottie';
 
-// This component loads before the theme so we cannot use theme tokens here
+import { LoadingAnimationData } from './LoadingAnimationData';
+
+const options = {
+  loop: true,
+  autoplay: true,
+  animationData: LoadingAnimationData,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice',
+  },
+};
 
+// This component loads before the theme so we cannot use theme tokens here
 const Loading = () => {
   return (
     <Flex position="relative" width="100vw" height="100vh" alignItems="center" justifyContent="center" bg="#151519">
-      <Image src={InvokeLogoWhite} w="8rem" h="8rem" />
-      <Spinner
-        label="Loading"
-        color="grey"
-        position="absolute"
-        size="sm"
-        width="24px !important"
-        height="24px !important"
-        right="1.5rem"
-        bottom="1.5rem"
-      />
+      <Lottie options={options} width={200} height={200} />
     </Flex>
   );
 };