diff --git a/src/common/component/Loading.js b/src/common/component/Loading.js
new file mode 100644
index 00000000..9948a2c2
--- /dev/null
+++ b/src/common/component/Loading.js
@@ -0,0 +1,59 @@
+// import { useState, useEffect } from "react";
+import styled, { keyframes } from "styled-components";
+import { Ring } from "@uiball/loaders";
+
+import Button from "./styled/Button";
+import useLogout from "../hook/useLogout";
+const DelayVisible = keyframes`
+from{
+opacity: 0;
+}
+to{
+opacity: 1;
+}
+`;
+const StyledWrapper = styled.div`
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ align-items: center;
+ justify-content: center;
+ .loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .reload {
+ opacity: 0;
+ &.visible {
+ animation: ${DelayVisible} 1s forwards;
+ animation-delay: 30s;
+ }
+ }
+`;
+export default function Loading({ reload = false }) {
+ const { clearLocalData } = useLogout();
+ const handleReload = () => {
+ clearLocalData();
+ location.reload(true);
+ };
+ return (
+
+
+
+
+ );
+}
diff --git a/src/routes/home/Loading.js b/src/routes/home/Loading.js
deleted file mode 100644
index 1950ba7f..00000000
--- a/src/routes/home/Loading.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useState, useEffect } from "react";
-import styled from "styled-components";
-import { Ring } from "@uiball/loaders";
-
-import Button from "../../common/component/styled/Button";
-import useLogout from "../../common/hook/useLogout";
-
-const StyledWrapper = styled.div`
- width: 100vw;
- height: 100vh;
- display: flex;
- flex-direction: column;
- gap: 15px;
- align-items: center;
- justify-content: center;
- .loading {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .reload {
- visibility: hidden;
- &.visible {
- visibility: visible;
- }
- }
-`;
-export default function Loading() {
- const [reloadVisible, setReloadVisible] = useState(false);
- const { clearLocalData } = useLogout();
- const handleReload = () => {
- clearLocalData();
- location.reload(true);
- };
- useEffect(() => {
- const inter = setTimeout(() => {
- setReloadVisible(true);
- }, 30000);
-
- return () => {
- clearTimeout(inter);
- };
- }, []);
-
- return (
-
-
- {reloadVisible && (
-
- )}
-
- );
-}
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 431c5af4..ba01ad21 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
import StyledWrapper from "./styled";
import User from "./User";
// import Tools from "./Tools";
-import Loading from "./Loading";
+import Loading from "../../common/component/Loading";
import Menu from "./Menu";
import usePreload from "./usePreload";
import usePWABadge from "../../common/hook/usePWABadge";
@@ -38,7 +38,7 @@ export default function HomePage() {
const { loading } = usePreload();
// console.log("index loading", loading, ready);
if (loading || !ready) {
- return ;
+ return ;
}
const isSettingPage = pathname.startsWith("/setting");
if (isSettingPage) {
diff --git a/src/routes/index.js b/src/routes/index.js
index 58d40f9e..7d051f26 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,134 +1,140 @@
-import { useEffect } from "react";
+import { Suspense, useEffect, lazy } from "react";
import { Route, Routes, HashRouter } from "react-router-dom";
import { Provider, useSelector } from "react-redux";
+import toast from "react-hot-toast";
// import Welcome from './Welcome'
import NotFoundPage from "./404";
-import OAuthPage from "./oauth";
-import LoginPage from "./login";
-import SendMagicLinkPage from "./sendMagicLink";
-import RegBasePage from "./reg";
-import RegPage from "./reg/Register";
-import RegWithUsernamePage from "./reg/RegWithUsername";
-import HomePage from "./home";
-import ChatPage from "./chat";
-import FavoritesPage from "./favs";
-import ContactsPage from "./contacts";
+const HomePage = lazy(() => import("./home"));
+const RegBasePage = lazy(() => import("./reg"));
+const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
+const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
+const RegPage = lazy(() => import("./reg/Register"));
+const LoginPage = lazy(() => import("./login"));
+const OAuthPage = lazy(() => import("./oauth"));
+const ChatPage = lazy(() => import("./chat"));
+const ContactsPage = lazy(() => import("./contacts"));
+const FavoritesPage = lazy(() => import("./favs"));
+const OnboardingPage = lazy(() => import("./onboarding"));
+const InvitePage = lazy(() => import("./invite"));
+const SettingChannelPage = lazy(() => import("./settingChannel"));
+const SettingPage = lazy(() => import("./setting"));
+const ResourceManagement = lazy(() => import("./resources"));
import RequireAuth from "../common/component/RequireAuth";
import RequireNoAuth from "../common/component/RequireNoAuth";
import Meta from "../common/component/Meta";
+import Loading from "../common/component/Loading";
import store from "../app/store";
-import InvitePage from "./invite";
-import SettingPage from "./setting";
-import SettingChannelPage from "./settingChannel";
-import OnboardingPage from "./onboarding";
-import toast from "react-hot-toast";
-import ResourceManagement from "./resources";
const PageRoutes = () => {
- const {
- ui: { online },
- fileMessages
- } = useSelector((store) => {
- return { ui: store.ui, fileMessages: store.fileMessage };
- });
- // 掉线检测
- useEffect(() => {
- let toastId = 0;
- if (!online) {
- toast.error("Network Offline!", { duration: Infinity });
- } else {
- toast.dismiss(toastId);
- }
- }, [online]);
+ const {
+ ui: { online },
+ fileMessages,
+ } = useSelector((store) => {
+ return { ui: store.ui, fileMessages: store.fileMessage };
+ });
+ // 掉线检测
+ useEffect(() => {
+ let toastId = 0;
+ if (!online) {
+ toast.error("Network Offline!", { duration: Infinity });
+ } else {
+ toast.dismiss(toastId);
+ }
+ }, [online]);
- return (
-
-
- } />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- >
- } />
-
- } />
- } />
-
-
-
-
-
- }
- />
- } />
- } />
-
-
-
- }
- >
-
- } />
- } />
-
- } />
-
- } />
- } />
- } />
-
-
- } />
- } />
-
- }>
- }>
-
- } />
-
-
- );
+ return (
+
+ }>
+
+ } />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ >
+ } />
+
+ } />
+ } />
+
+
+
+
+
+ }
+ />
+ } />
+ } />
+
+
+
+ }
+ >
+
+ } />
+ } />
+
+ } />
+
+ } />
+ } />
+ } />
+
+
+ } />
+ } />
+
+ }>
+ }
+ >
+
+ } />
+
+
+
+ );
};
// const local_key = "AUTH_DATA";
export default function ReduxRoutes() {
- // const [authData, setAuthData] = useState(
- // JSON.parse(localStorage.getItem(local_key))
- // );
- // const updateAuthData = (data) => {
- // localStorage.setItem(local_key, JSON.stringify(data));
- // setAuthData(data);
- // };
- return (
-
-
-
-
- );
+ // const [authData, setAuthData] = useState(
+ // JSON.parse(localStorage.getItem(local_key))
+ // );
+ // const updateAuthData = (data) => {
+ // localStorage.setItem(local_key, JSON.stringify(data));
+ // setAuthData(data);
+ // };
+ return (
+
+
+
+
+ );
}