fix(component): affine loading (#1887)

apps/web/src/components/pure/loading/Loading.tsx

@@ -1,20 +0,0 @@
-import {
-  StyledLoading,
-  StyledLoadingItem,
-  StyledLoadingWrapper,
-} from './styled';
-
-export const Loading = ({ size = 40 }: { size?: number }) => {
-  return (
-    <StyledLoadingWrapper size={size}>
-      <StyledLoading>
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-        <StyledLoadingItem size={size} />
-      </StyledLoading>
-    </StyledLoadingWrapper>
-  );
-};
-
-export default Loading;

apps/web/src/components/pure/loading/PageLoading.tsx

@@ -1,7 +1,22 @@
 import { styled } from '@affine/component';
+import { AffineLoading } from '@affine/component/affine-loading';
 import { useTranslation } from '@affine/i18n';
+import { memo, Suspense } from 'react';
 
-import Loading from './Loading';
+export const Loading = memo(function Loading() {
+  return (
+    <div
+      style={{
+        height: '180px',
+        width: '180px',
+      }}
+    >
+      <Suspense>
+        <AffineLoading loop={true} autoplay={true} autoReverse={true} />
+      </Suspense>
+    </div>
+  );
+});
 
 // Used for the full page loading
 const StyledLoadingContainer = styled('div')(() => {

apps/web/src/components/pure/loading/index.tsx

@@ -1,3 +1,3 @@
-import Loading from './Loading';
+import { Loading } from './PageLoading';
 export * from './PageLoading';
 export default Loading;

apps/web/src/components/pure/loading/styled.ts

@@ -1,94 +0,0 @@
-import { styled } from '@affine/component';
-
-// Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-export const StyledLoadingWrapper = styled('div', {
-  shouldForwardProp: prop => {
-    return !['size'].includes(prop as string);
-  },
-})<{ size?: number }>(({ size = 40 }) => {
-  return {
-    width: size * 4,
-    height: size * 4,
-    position: 'relative',
-  };
-});
-export const StyledLoading = styled('div')`
-  position: absolute;
-  left: 25%;
-  top: 50%;
-  transform: rotateX(55deg) rotateZ(-45deg);
-  @keyframes slide {
-    0% {
-      transform: translate(var(--sx), var(--sy));
-    }
-    65% {
-      transform: translate(var(--ex), var(--sy));
-    }
-    95%,
-    100% {
-      transform: translate(var(--ex), var(--ey));
-    }
-  }
-`;
-
-export const StyledLoadingItem = styled('div')<{ size: number }>(
-  ({ size = 40 }) => {
-    return `
-  position: absolute;
-  width: ${size}px;
-  height: ${size}px;
-  background: #9dacf9;
-  animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  &::before {
-    background: #5260b9;
-    transform: skew(0deg, -45deg);
-    right: 100%;
-    top: 50%;
-  }
-
-  &::after {
-    background: #6880ff;
-    transform: skew(-45deg, 0deg);
-    top: 100%;
-    right: 50%;
-  }
-
-  &:nth-of-type(1) {
-    --sx: 50%;
-    --sy: -50%;
-    --ex: 150%;
-    --ey: 50%;
-  }
-
-  &:nth-of-type(2) {
-    --sx: -50%;
-    --sy: -50%;
-    --ex: 50%;
-    --ey: -50%;
-  }
-
-  &:nth-of-type(3) {
-    --sx: 150%;
-    --sy: 50%;
-    --ex: 50%;
-    --ey: 50%;
-  }
-
-  &:nth-of-type(4) {
-    --sx: 50%;
-    --sy: 50%;
-    --ex: -50%;
-    --ey: -50%;
-  }
-`;
-  }
-);

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,
+        loop,
-        autoplay: false,
+        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({
+      if (options.autoReverse && options.autoplay) {
-        ...options,
+        lottieInstance.current = lottie.loadAnimation({
-        container: element.current,
+          ...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,
+};