feat: add new affine loading component

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,