feat: add new affine loading component

apps/electron/yarn.lock

@@ -77,6 +77,7 @@ __metadata:
     jest-mock: ^29.5.0
     kebab-case: ^1.0.2
     lit: ^2.7.2
+    lottie-web: ^5.11.0
     react: ^18.2.0
     react-dnd: ^16.0.1
     react-dnd-html5-backend: ^16.0.1
@@ -175,6 +176,9 @@ __metadata:
   dependencies:
     "@affine/env": "workspace:*"
     jotai: ^2.0.4
+    lottie-web: ^5.11.0
+  peerDependencies:
+    lottie-web: "*"
   languageName: unknown
   linkType: soft
 
@@ -12631,6 +12635,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lottie-web@npm:^5.11.0":
+  version: 5.11.0
+  resolution: "lottie-web@npm:5.11.0"
+  checksum: 4f9c86c7cf0280ccb4380b826213719122a227f50e27e5d6943dff2f05dfe4e569bd8a358a0cb9c96cbdf62f9d70b883b5cb5ec50ecb7a1eed794c5ce5a1e38a
+  languageName: node
+  linkType: hard
+
 "lowercase-keys@npm:^2.0.0":
   version: 2.0.0
   resolution: "lowercase-keys@npm:2.0.0"

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/CustomLottie.tsx

@@ -1,58 +0,0 @@
-import { atom, useAtomValue } from 'jotai';
-import type { FC } from 'react';
-import { useEffect, useRef } from 'react';
-
-const lottieAtom = atom(async () => import('lottie-web').then(m => m.default));
-
-type CustomLottieProps = {
-  options: {
-    loop?: boolean | number | undefined;
-    autoplay?: boolean | undefined;
-    animationData: any;
-    rendererSettings?: {
-      preserveAspectRatio?: string | undefined;
-    };
-  };
-  isStopped?: boolean | undefined;
-  speed?: number | undefined;
-  width?: number | string | undefined;
-  height?: number | string | undefined;
-};
-
-const CustomLottie: FC<CustomLottieProps> = ({
-  options,
-  isStopped,
-  speed,
-  width,
-  height,
-}) => {
-  const element = useRef<HTMLDivElement>(null);
-  const lottieInstance = useRef<any>();
-  const lottie = useAtomValue(lottieAtom);
-
-  useEffect(() => {
-    if (element.current) {
-      lottieInstance.current = lottie.loadAnimation({
-        ...options,
-        container: element.current,
-      });
-    }
-    return () => {
-      lottieInstance.current?.destroy();
-    };
-  }, [lottie, options]);
-
-  useEffect(() => {
-    if (speed) {
-      lottieInstance.current?.setSpeed(speed);
-    }
-    if (isStopped) {
-      lottieInstance.current?.stop();
-    } else {
-      lottieInstance.current?.play();
-    }
-  }, [isStopped, speed]);
-
-  return <div ref={element} style={{ width, height }}></div>;
-};
-export default CustomLottie;

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx

@@ -1,8 +1,8 @@
+import { InternalLottie } from '@affine/component/internal-lottie';
 import type { HTMLAttributes } from 'react';
 import type React from 'react';
 import { cloneElement, useState } from 'react';
 
-import Lottie from './CustomLottie';
 import { StyledSwitchItem } from './style';
 
 type HoverAnimateControllerProps = {
@@ -45,7 +45,7 @@ export const PageSwitchItem = (
 ) => {
   return (
     <HoverAnimateController {...props}>
-      <Lottie
+      <InternalLottie
         options={{
           loop: false,
           autoplay: false,
@@ -64,7 +64,7 @@ export const EdgelessSwitchItem = (
 ) => {
   return (
     <HoverAnimateController {...props}>
-      <Lottie
+      <InternalLottie
         options={{
           loop: false,
           autoplay: false,