refactor: remove benchmark animation

Author: chenjiahan

package.json

@@ -70,9 +70,6 @@
     "bump": "npx bumpp",
     "chromatic": "chromatic"
   },
-  "dependencies": {
-    "framer-motion": "^12.23.25"
-  },
   "nano-staged": {
     "*.{md,mdx,json,css,less,scss}": "prettier --write",
     "*.{js,jsx,ts,tsx,mjs,cjs}": [
@@ -104,7 +101,6 @@
     "prettier": "~3.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^10.0.0",
     "rimraf": "~6.1.2",
     "semver": "7.7.3",
     "simple-git-hooks": "^2.13.1",

pnpm-lock.yaml

@@ -43,7 +43,7 @@ export default defineConfig({
   ],
   output: {
     target: 'web',
-    externals: ['react', 'react-dom', 'react/jsx-runtime', 'framer-motion'],
+    externals: ['react', 'react-dom', 'react/jsx-runtime'],
     filename: {
       js: '[name]/index.js',
       css: '[name]/index.css',

rslib.config.ts

@@ -1,9 +1,7 @@
-import { motion } from 'framer-motion';
-import { useState } from 'react';
 import styles from './ProgressBar.module.scss';
 
-export function formatTime(time: number, totalTime: number) {
-  if (totalTime < 1000) {
+export function formatTime(time: number) {
+  if (time < 1000) {
     return `${time.toFixed(0)}ms`;
   }
   return `${(time / 1000).toFixed(2)}s`;
@@ -13,37 +11,24 @@ export function ProgressBar({
   value,
   max,
   desc,
-  inView,
 }: {
   value: number;
   max: number;
   desc: string;
-  inView: boolean;
 }) {
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const TOTAL_TIME = value * 1000;
-  const variants = {
-    initial: { width: 0 },
-    animate: { width: `${(value / max) * 100}%` },
-  };
-
-  const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
+  const formattedTime = formatTime(value * 1000);
   return (
     <div className={styles.container}>
       <div className={styles.innerContainer}>
-        {inView ? (
-          <motion.div
-            className={styles.bar}
-            initial="initial"
-            animate="animate"
-            variants={variants}
-            onUpdate={(latest: { width: string }) => {
-              const width = Number.parseFloat(latest.width);
-              setElapsedTime(width * max * 10);
-            }}
-            transition={{ duration: value, ease: 'linear' }}
-          />
-        ) : null}
+        <div
+          className={styles.bar}
+          style={{ width: `${(value / max) * 100}%` }}
+          // onUpdate={(latest: { width: string }) => {
+          //   const width = Number.parseFloat(latest.width);
+          //   setElapsedTime(width * max * 10);
+          // }}
+          // transition={{ duration: value, ease: 'linear' }}
+        />
       </div>
       <div className={styles.desc}>
         <span className={styles.time}>{formattedTime}</span> {desc}

src/benchmark/ProgressBar.tsx

@@ -1,4 +1,3 @@
-import { useInView } from 'react-intersection-observer';
 import { ProgressBar } from './ProgressBar';
 import styles from './index.module.scss';
 
@@ -30,11 +29,8 @@ const findMaxTime = (data: BenchmarkData) => {
 
 export function Benchmark({ data }: BenchmarkProps) {
   const maxTime = findMaxTime(data);
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-  });
   return (
-    <div className={styles.root} ref={ref}>
+    <div className={styles.root}>
       {Object.values(data).map(item => (
         <div key={item.label} className={styles.item}>
           <p className={styles.progressName}>{item.label}</p>
@@ -45,7 +41,6 @@ export function Benchmark({ data }: BenchmarkProps) {
                 value={metric.time}
                 max={maxTime}
                 desc={metric.desc}
-                inView={inView}
               />
             ))}
           </div>