💄 style: improve loading

Author: arvinxx

package.json

@@ -61,7 +61,6 @@
     "polished": "^4.2.2",
     "qs": "^6.11.2",
     "react": "^18",
-    "react-animated-ellipsis": "^1.0.0",
     "react-dom": "^18",
     "react-i18next": "^14.0.0",
     "react-image-size": "^2.3.2",

src/features/Preview/AnimatedEllipsis.tsx

@@ -0,0 +1,29 @@
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    aspect-ratio: 4;
+    width: 24px;
+
+    background: radial-gradient(circle closest-side, ${token.colorTextLightSolid} 40%, #0000) 0 /
+      calc(100% / 3) 80% space;
+    clip-path: inset(0 100% 0 0);
+
+    animation: step 0.7s steps(4) infinite;
+
+    @keyframes step {
+      to {
+        clip-path: inset(0 -34% 0 0);
+      }
+    }
+  `,
+}));
+
+const ReactAnimatedEllipsis = memo(() => {
+  const { styles } = useStyles();
+
+  return <div className={styles.container} />;
+});
+
+export default ReactAnimatedEllipsis;

src/features/Preview/index.tsx

@@ -2,13 +2,12 @@ import { useSize } from 'ahooks';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useEffect, useRef } from 'react';
-// @ts-ignore
-import ReactAnimatedEllipsis from 'react-animated-ellipsis';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
 import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
 
+import ReactAnimatedEllipsis from './AnimatedEllipsis';
 import Guide from './Guide';
 import ImagePreview from './ImagePreview';
 import Loading from './Loading';
@@ -30,6 +29,7 @@ const useStyles = createStyles(({ css, token, cx, stylish, prefixCls }) => ({
       border-radius: 50%;
       .${prefixCls}-progress-text {
         font-family: ${token.fontFamilyCode};
+        color: ${token.colorTextLightSolid};
       }
     `,
   ),
@@ -67,8 +67,9 @@ const Preview = memo(() => {
           {showProgress && (
             <div className={styles.process}>
               {progress === 0 ? (
-                <Center className={styles.waiting} height={72} horizontal width={72}>
-                  {t('task.starting')} <ReactAnimatedEllipsis fontSize="1rem" />
+                <Center className={styles.waiting} gap={2} height={72} horizontal width={72}>
+                  <div>{t('task.starting')}</div>
+                  <ReactAnimatedEllipsis />
                 </Center>
               ) : (
                 <Progress percent={progress} size="small" type="circle" />