fix: connection page NaN and first enter animation

src/components/connection/connection-table.tsx

@@ -1,8 +1,8 @@
+import parseTraffic from "@/utils/parse-traffic";
+import { truncateStr } from "@/utils/truncate-str";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import dayjs from "dayjs";
 import { useMemo, useState } from "react";
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { truncateStr } from "@/utils/truncate-str";
-import parseTraffic from "@/utils/parse-traffic";
 
 interface Props {
   connections: IConnectionsItem[];
@@ -24,31 +24,31 @@ export const ConnectionTable = (props: Props) => {
       width: 88,
       align: "right",
       headerAlign: "right",
-      valueFormatter: ({ value }) => parseTraffic(value).join(" "),
+      valueFormatter: (value) => parseTraffic(value).join(" "),
     },
     {
       field: "upload",
       headerName: "Upload",
       width: 88,
       align: "right",
       headerAlign: "right",
-      valueFormatter: ({ value }) => parseTraffic(value).join(" "),
+      valueFormatter: (value) => parseTraffic(value).join(" "),
     },
     {
       field: "dlSpeed",
       headerName: "DL Speed",
       width: 88,
       align: "right",
       headerAlign: "right",
-      valueFormatter: ({ value }) => parseTraffic(value).join(" ") + "/s",
+      valueFormatter: (value) => parseTraffic(value).join(" ") + "/s",
     },
     {
       field: "ulSpeed",
       headerName: "UL Speed",
       width: 88,
       align: "right",
       headerAlign: "right",
-      valueFormatter: ({ value }) => parseTraffic(value).join(" ") + "/s",
+      valueFormatter: (value) => parseTraffic(value).join(" ") + "/s",
     },
     { field: "chains", headerName: "Chains", flex: 360, minWidth: 360 },
     { field: "rule", headerName: "Rule", flex: 300, minWidth: 250 },

src/components/log/log-item.module.scss.d.ts

@@ -1,5 +1,4 @@
-import globalClassNames from "../../style.d";
-declare const classNames: typeof globalClassNames & {
+declare const classNames: {
   readonly item: "item";
   readonly shiki: "shiki";
   readonly dark: "dark";

src/components/proxy/proxy-group.module.scss.d.ts

@@ -1,5 +1,4 @@
-import globalClassNames from "../../style.d";
-declare const classNames: typeof globalClassNames & {
+declare const classNames: {
   readonly proxyVirtuoso: "proxyVirtuoso";
 };
 export = classNames;

src/pages/_app.tsx

@@ -201,7 +201,7 @@ export default function App() {
 
             <div className="drag-mask" data-windrag />
 
-            <AnimatePresence mode="wait">
+            <AnimatePresence mode="wait" initial={false}>
               {/* {React.cloneElement(routes, { key: location.pathname })} */}
               <PageTransition />
             </AnimatePresence>

src/pages/connections..module.scss.d.ts → src/pages/connections.module.scss.d.ts

@@ -1,5 +1,4 @@
-import globalClassNames from "../style.d";
-declare const classNames: typeof globalClassNames & {
+declare const classNames: {
   readonly TopPanelPaper: "TopPanelPaper";
   readonly label: "label";
   readonly value: "value";

src/pages/connections.tsx

@@ -34,7 +34,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Virtuoso } from "react-virtuoso";
 import { useRecoilState } from "recoil";
-import styles from "./connections..module.scss";
+import styles from "./connections.module.scss";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 

src/utils/parse-traffic.ts

@@ -1,7 +1,12 @@
 const UNITS = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
-const parseTraffic = (num?: number) => {
-  if (typeof num !== "number") return ["NaN", ""];
+const parseTraffic = (num?: string | number) => {
+  if (typeof num !== "number") {
+    const tmp = Number(num);
+    if (isNaN(tmp)) return ["NaN", ""];
+    num = tmp;
+  }
+
   if (num < 1000) return [`${Math.round(num)}`, "B"];
   const exp = Math.min(Math.floor(Math.log2(num) / 10), UNITS.length - 1);
   const dat = num / Math.pow(1024, exp);