Merge branch 'v1.5_0707' into v1.5

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeSwiper.tsx

@@ -33,7 +33,7 @@ const HomeSwiper: FC<Props> = (props) => {
                             <Image
                                 width={"100%"}
                                 height={"1.86rem"}
-                                lazy
+                                // lazy
                                 className="rounded-[0.1rem]"
                                 src={banner.content}
                                 // style={{ height: "1.86rem", width: "100%" }}

src/app/[locale]/layout.tsx

@@ -1,6 +1,7 @@
 import { ConfigType } from "@/api/config";
 import Dialogs from "@/components/Dialog";
 // import AutoShowDialog from "@/dialog/auto";
+import Loading2 from "@/components/Loading2";
 import { routing } from "@/i18n/routing";
 import { server } from "@/utils/server";
 import clsx from "clsx";
@@ -111,8 +112,12 @@ export default async function LocaleLayout({
                         top: 0,
                         right: 0,
                         bottom: 0,
+                        alignItems: "center",
+                        justifyContent: "center",
                     }}
-                ></div>
+                >
+                    <Loading2></Loading2>
+                </div>
             </body>
         </html>
     );

src/components/Layout/Sidebar.tsx

@@ -96,6 +96,20 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
         })
     );
 
+    React.useEffect(() => {
+        console.log(pathname);
+        setTimeout(() => {
+            const dom: any = document.querySelector("#globalMask");
+            if (dom) dom.style.display = "none";
+        }, 500);
+        // Router.events.on("routeChangeComplete", () => {
+        //     console.log(99990);
+        // });
+        // setTimeout(() => {
+        //     Router.events.emit("routeChangeComplete");
+        // }, 10000);
+    }, [pathname]);
+
     React.useEffect(() => {
         if (!providers || providers.length === 0) {
             getGames().then((res) => {

src/components/Loading2/index.module.scss

@@ -0,0 +1,25 @@
+.loading {
+    text-align: center;
+    line-height: 4px;
+    display: inline-block;
+    span {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #11de68;
+        display: inline-block;
+        margin: 0 4px;
+        transform: translateY(0);
+        animation: loading linear infinite;
+    }
+}
+@keyframes loading {
+    0%,
+    50%,
+    100% {
+        transform: translateY(0);
+    }
+    25% {
+        transform: translateY(-5px);
+    }
+}

src/components/Loading2/index.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./index.module.scss";
+
+interface LoadingProps {
+    className?: string; // 可选的 className 属性，用于传递额外的样式类名
+    color?: string;
+    width?: number;
+    space?: number;
+    point?: number;
+    animationDuration?: number;
+}
+
+const Loading: React.FC<LoadingProps> = ({
+    className,
+    color,
+    width = 5,
+    point = 4,
+    space = 2,
+    animationDuration = 800,
+}) => {
+    const Point = ({ idx }: { idx: number }) => {
+        return (
+            <span
+                style={{
+                    backgroundColor: color,
+                    width: `${width}px`,
+                    height: `${width}px`,
+                    animationDelay: `${pointTime * idx}ms`,
+                    animationDuration: `${animationDuration}ms`,
+                    margin: `0 ${space}px`,
+                }}
+            ></span>
+        );
+    };
+    const pointTime = React.useMemo(() => {
+        return animationDuration / 2 / point;
+    }, [point, animationDuration]);
+
+    const PointList = React.useCallback(() => {
+        return Array.from({ length: point }, (_, index) => <Point key={index} idx={index}></Point>);
+    }, [point]);
+
+    return (
+        <div className={clsx(styles.loading, className)}>
+            <PointList></PointList>
+        </div>
+    );
+};
+
+export default Loading;

src/i18n/routing.ts

@@ -24,11 +24,14 @@ export const routing = defineRouting({
 
 const useRouter = () => {
     const router = useBaseRouter();
-
     const cfg: any = { ...router };
     Object.keys(router).forEach((key: any) => {
         cfg[key] = (...args: any) => {
-            // document.querySelector("#globalMask").style.display = "block";
+            if (key === "push") {
+                const dom: any = document.querySelector("#globalMask");
+                if (dom) dom.style.display = "flex";
+            }
+
             (router as any)[key].apply(null, args);
         };
     });