From 7d58ea20eec90afa589d0ac5e52a89bdeef057aa Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 16 Nov 2023 19:27:42 +0800
Subject: [PATCH] chore: improve animation performace

---
 src/components/scroll_logo/Card.tsx           |  7 ++-
 src/components/scroll_logo/index.tsx          | 57 +++++++++---------
 .../scroll_logo/scroll_logo.module.css        | 59 +++++++++++++++++++
 src/components/scroll_logo/style.ts           | 36 -----------
 src/components/section/index.tsx              |  2 +-
 src/screens/Infrastructure/index.tsx          |  5 +-
 6 files changed, 97 insertions(+), 69 deletions(-)
 create mode 100644 src/components/scroll_logo/scroll_logo.module.css
 delete mode 100644 src/components/scroll_logo/style.ts

diff --git a/src/components/scroll_logo/Card.tsx b/src/components/scroll_logo/Card.tsx
index bf6a646e..b6101081 100644
--- a/src/components/scroll_logo/Card.tsx
+++ b/src/components/scroll_logo/Card.tsx
@@ -6,11 +6,13 @@ import "swiper/swiper.min.css";
 
 SwiperCore.use([Autoplay]);
 type Props = {
+  imageSize?: number;
   networkData: { image: string; name: string }[];
   sx?: SxProps<Theme> | undefined;
 };
-const Card = ({ networkData, sx }: Props) => {
+const Card = ({ networkData, sx, imageSize }: Props) => {
   const theme = useTheme();
+
   return (
     <Box display="flex" maxWidth="max-content" sx={sx}>
       {networkData.map((item: any, index) => (
@@ -46,9 +48,8 @@ const Card = ({ networkData, sx }: Props) => {
             {item.image && (
               <Image
                 alt=""
-                layout="fill"
-                objectFit="contain"
                 src={item.image}
+                {...(imageSize && { width: imageSize, height: imageSize })}
               />
             )}
           </Box>
diff --git a/src/components/scroll_logo/index.tsx b/src/components/scroll_logo/index.tsx
index bc477e79..4209e389 100644
--- a/src/components/scroll_logo/index.tsx
+++ b/src/components/scroll_logo/index.tsx
@@ -1,22 +1,23 @@
 import { Box, Container, useMediaQuery, useTheme } from "@mui/material";
-import dynamic from "next/dynamic";
 import { useMemo } from "react";
 
+import { NoSSR } from "@components/no-ssr";
 import { allNetworkKeys, getNetworkInfo } from "@utils/network_info";
 
-import { TransitionCSS } from "./style";
+import Card from "./Card";
+import classes from "./scroll_logo.module.css";
+
+function splitArray(array: any[], length: number) {
+  const result = [];
+  for (let i = 0; i < array.length; i += length) {
+    result.push(array.slice(i, i + length));
+  }
+  return result;
+}
 
-const Card = dynamic(() => import("./Card"), { ssr: false });
 const ScrollLogo = () => {
   const theme = useTheme();
-  // 分割数组
-  function splitArray(array: any[], length: number) {
-    const result = [];
-    for (let i = 0; i < array.length; i += length) {
-      result.push(array.slice(i, i + length));
-    }
-    return result;
-  }
+
   const allNetworkData = allNetworkKeys.map((x: string | number) =>
     getNetworkInfo(x),
   );
@@ -52,23 +53,23 @@ const ScrollLogo = () => {
           py: "10px",
         }}
       >
-        <Box position="relative" width="max-content">
-          {data.map((networkData, index) => (
-            <TransitionCSS
-              key={index}
-              style={{
-                animation:
-                  "35s linear 0s infinite alternate none running jss634",
-                animationName:
-                  index === 1
-                    ? " horizontalRightMove"
-                    : `horizontalMove${index}`,
-              }}
-            >
-              <Card networkData={networkData.concat(networkData)} />
-            </TransitionCSS>
-          ))}
-        </Box>
+        <NoSSR>
+          <Box position="relative" width="max-content">
+            {data.map((networkData, index) => (
+              <div
+                key={index}
+                className={[classes.animatedRow, classes[`left${index}`]].join(
+                  " ",
+                )}
+              >
+                <Card
+                  imageSize={30}
+                  networkData={networkData.concat(networkData)}
+                />
+              </div>
+            ))}
+          </Box>
+        </NoSSR>
       </Box>
     </Container>
   );
diff --git a/src/components/scroll_logo/scroll_logo.module.css b/src/components/scroll_logo/scroll_logo.module.css
new file mode 100644
index 00000000..a8ee526c
--- /dev/null
+++ b/src/components/scroll_logo/scroll_logo.module.css
@@ -0,0 +1,59 @@
+@keyframes horizontalMove0 {
+  0% {
+    transform: translateX(-10vw);
+  }
+  100% {
+    transform: translateX(calc(-100% + 100vw));
+  }
+}
+@keyframes horizontalMove1 {
+  0% {
+    transform: translateX(calc(-100% + 200vw));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes horizontalMove2 {
+  0% {
+    transform: translateX(-10vw);
+  }
+  100% {
+    transform: translateX(calc(-100% + 100vw));
+  }
+}
+@keyframes horizontalMove3 {
+  0% {
+    transform: translateX(calc(-100% + 200vw));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animatedRow {
+  animation-delay: 0s;
+  animation-direction: alternate;
+  animation-duration: 200s;
+  animation-fill-mode: none;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  animation-timing-function: linear;
+}
+
+.left0 {
+  animation-name: horizontalMove0;
+}
+.left1 {
+  animation-name: horizontalMove1;
+}
+.left2 {
+  animation-name: horizontalMove2;
+}
+.left3 {
+  animation-name: horizontalMove3;
+}
+
+.animatedRow:hover {
+  animation-play-state: paused;
+}
diff --git a/src/components/scroll_logo/style.ts b/src/components/scroll_logo/style.ts
deleted file mode 100644
index f58ca804..00000000
--- a/src/components/scroll_logo/style.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from "@emotion/styled";
-
-export const TransitionCSS = styled.div<any>`
-  @keyframes horizontalRightMove {
-    0% {
-      transform: translateX(calc(-100% + 100vw));
-    }
-    100% {
-      transform: translateX(0);
-    }
-  }
-  @keyframes horizontalMove0 {
-    0% {
-      transform: translateX(20vw);
-    }
-    100% {
-      transform: translateX(calc(-100% + 100vw));
-    }
-  }
-  @keyframes horizontalMove2 {
-    0% {
-      transform: translateX(25vw);
-    }
-    100% {
-      transform: translateX(calc(-100% + 100vw));
-    }
-  }
-  @keyframes horizontalMove3 {
-    0% {
-      transform: translateX(30vw);
-    }
-    100% {
-      transform: translateX(calc(-100% + 100vw));
-    }
-  }
-`;
diff --git a/src/components/section/index.tsx b/src/components/section/index.tsx
index 9a38d768..c4b2fbae 100644
--- a/src/components/section/index.tsx
+++ b/src/components/section/index.tsx
@@ -6,11 +6,11 @@ const Trans = dynamic(async () => import("next-translate/Trans"), {
 });
 
 type Props = {
+  desc?: string;
   maxWidth?: string;
   title?: string;
   title_large?: string;
   title_large_trans?: string;
-  desc?: string;
 };
 
 // Rename the component so the i18next parser doesn't try to parse it
diff --git a/src/screens/Infrastructure/index.tsx b/src/screens/Infrastructure/index.tsx
index 2aaf481d..e3ed2490 100644
--- a/src/screens/Infrastructure/index.tsx
+++ b/src/screens/Infrastructure/index.tsx
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import type { SyntheticEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 
+import { NoSSR } from "@components/no-ssr";
 import { Layout, ScrollToTop } from "@src/components";
 import Carousel from "@src/components/Carousel";
 import IntroPanel from "@src/components/Intro_panel";
@@ -318,7 +319,9 @@ const Infrastructure = () => {
           </CtaButton>
         </Stack>
         <Stack>
-          <Carousel personList={personList} />
+          <NoSSR>
+            <Carousel personList={personList} />
+          </NoSSR>
         </Stack>
         <ScrollToTop topRef={topRef} />
       </Container>