fix(component): affine loading (#1887)

packages/component/src/components/affine-loading/index.tsx

@@ -1,18 +1,30 @@
 import { useTheme } from '@mui/material';
+import type { FC } from 'react';
 
 import { InternalLottie } from '../internal-lottie';
 import dark from './loading-black.json';
 import light from './loading-white.json';
 
-export const AffineLoading = () => {
+export type AffineLoadingProps = {
+  loop?: boolean;
+  autoplay?: boolean;
+  autoReverse?: boolean;
+};
+
+export const AffineLoading: FC<AffineLoadingProps> = ({
+  loop = false,
+  autoplay = false,
+  autoReverse = false,
+}) => {
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
   return (
     <InternalLottie
       key={isDark ? 'dark' : 'light'}
       options={{
-        loop: false,
-        autoplay: false,
+        loop,
+        autoplay,
+        autoReverse,
         animationData: isDark ? light : dark,
         rendererSettings: {
           preserveAspectRatio: 'xMidYMid slice',

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]);

packages/component/src/stories/AffineLoading.stories.tsx

@@ -7,4 +7,19 @@ export default {
   component: AffineLoading,
 };
 
-export const Default: StoryFn = () => <AffineLoading />;
+export const Default: StoryFn = ({ width, loop, autoplay, autoReverse }) => (
+  <div
+    style={{
+      width: width,
+      height: width,
+    }}
+  >
+    <AffineLoading loop={loop} autoplay={autoplay} autoReverse={autoReverse} />
+  </div>
+);
+Default.args = {
+  width: 100,
+  loop: true,
+  autoplay: true,
+  autoReverse: true,
+};