fix(component): affine loading (#1887)

packages/component/src/components/internal-lottie/index.tsx

@@ -1,11 +1,13 @@
 import { lottieAtom } from '@affine/jotai';
 import { useAtomValue } from 'jotai';
+import type { AnimationItem } from 'lottie-web';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
 
 type CustomLottieProps = {
   options: {
     loop?: boolean | number | undefined;
+    autoReverse?: boolean | undefined;
     autoplay?: boolean | undefined;
     animationData: any;
     rendererSettings?: {
@@ -26,17 +28,53 @@ export const InternalLottie: FC<CustomLottieProps> = ({
   height,
 }) => {
   const element = useRef<HTMLDivElement>(null);
-  const lottieInstance = useRef<any>();
+  const lottieInstance = useRef<AnimationItem>();
   const lottie = useAtomValue(lottieAtom);
+  const directionRef = useRef<1 | -1>(1);
 
   useEffect(() => {
+    const callback = () => {
+      if (!lottieInstance.current) {
+        return;
+      }
+      const frame = lottieInstance.current.currentFrame.toFixed(0);
+      if (frame === '1' || frame === '0') {
+        directionRef.current = 1;
+        lottieInstance.current.setDirection(directionRef.current);
+        lottieInstance.current.goToAndStop(0, true);
+        lottieInstance.current.play();
+      } else {
+        directionRef.current = -1;
+        lottieInstance.current.setDirection(directionRef.current);
+        lottieInstance.current.goToAndStop(
+          lottieInstance.current.totalFrames - 1,
+          true
+        );
+        lottieInstance.current.play();
+      }
+    };
     if (element.current) {
-      lottieInstance.current = lottie.loadAnimation({
-        ...options,
-        container: element.current,
-      });
+      if (options.autoReverse && options.autoplay) {
+        lottieInstance.current = lottie.loadAnimation({
+          ...options,
+          autoplay: false,
+          loop: false,
+          container: element.current,
+        });
+      } else {
+        lottieInstance.current = lottie.loadAnimation({
+          ...options,
+          container: element.current,
+        });
+      }
+      if (options.autoReverse) {
+        lottieInstance.current.addEventListener('complete', callback);
+      }
     }
     return () => {
+      if (options.autoReverse) {
+        lottieInstance.current?.removeEventListener('complete', callback);
+      }
       lottieInstance.current?.destroy();
     };
   }, [lottie, options]);