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

@@ -116,6 +116,7 @@
         "imagePrompt": "Image Prompt",
         "imageFailedToLoad": "Unable to Load Image",
         "img2img": "Image To Image",
+        "initializingInvokeAI": "Initializing Invoke AI ...",
         "inpaint": "inpaint",
         "input": "Input",
         "installed": "Installed",

invokeai/frontend/web/public/locales/en.json

@@ -1,23 +1,38 @@
-import { Flex, Image, Spinner } from '@invoke-ai/ui-library';
-import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
+import { Flex, Text } from '@invoke-ai/ui-library';
+// import AnimatedVideoSpinner from 'public/assets/videos/LogoAnim.webm';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Options } from 'react-lottie';
+import Lottie from 'react-lottie';
 
-// This component loads before the theme so we cannot use theme tokens here
+import { LoadingAnimationData } from './LoadingAnimationData';
+
+const options: 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 = () => {
+  const { t } = useTranslation();
   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"
-      />
+    <Flex
+      position="relative"
+      flexDir="column"
+      width="100vw"
+      height="100vh"
+      alignItems="center"
+      justifyContent="center"
+      bg="#151519"
+    >
+      <Lottie options={options} width={200} height={200} />
+      <Text color="#535a65" fontFamily="sans-serif" fontSize="small" fontWeight={600}>
+        {t('common.initializingInvokeAI')}
+      </Text>
     </Flex>
   );
 };