SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lazy loading

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-20 15:16:21 +03:00
parent 71853901a6
commit e5c1285f90
3 changed files with 76 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -49,6 +49,7 @@
"react-error-boundary": "^4.0.11",
"react-image-crop": "^10.1.5",
"react-image-file-resizer": "^0.4.8",
"react-lazily": "^0.9.2",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",

114
src/App.tsx
View File

@ -1,11 +1,10 @@
import { Suspense, lazy } from "react";
import { lazily } from "react-lazily";
import ContactFormModal from "@ui_kit/ContactForm";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
import dayjs from "dayjs";
import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import ViewPage from "./pages/ViewPublicationPage";
import { DesignPage } from "./pages/DesignPage/DesignPage";
import {
Route,
Routes,
@ -14,16 +13,8 @@ import {
Navigate,
} from "react-router-dom";
import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import Landing from "./pages/Landing/Landing";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import { Result } from "./pages/ResultPage/Result";
import { ResultSettings } from "./pages/ResultPage/ResultSettings";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import Main from "./pages/main";
import EditPage from "./pages/startPage/EditPage";
import { Tariffs } from "./pages/Tariffs/Tariffs";
import {
clearAuthToken,
getMessageFromFetchError,
@ -50,13 +41,48 @@ import { isAxiosError } from "axios";
import { useEffect, useLayoutEffect, useRef } from "react";
import RecoverPassword from "./pages/auth/RecoverPassword";
import OutdatedLink from "./pages/auth/OutdatedLink";
import { QuizAnswersPage } from "./pages/QuizAnswersPage/QuizAnswersPage";
import type { OriginalUserAccount } from "@root/user";
import ChatImageNewWindow from "@ui_kit/FloatingSupportChat/ChatImageNewWindow";
import Analytics from "./pages/Analytics/Analytics";
export function useUserAccountFetcher<T = UserAccount>({
import type { SuspenseProps } from "react";
const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull"));
const ViewPage = lazy(() => import("./pages/ViewPublicationPage"));
const Analytics = lazy(() => import("./pages/Analytics/Analytics"));
const EditPage = lazy(() => import("./pages/startPage/EditPage"));
const { Tariffs } = lazily(() => import("./pages/Tariffs/Tariffs"));
const { DesignPage } = lazily(() => import("./pages/DesignPage/DesignPage"));
const { QuizAnswersPage } = lazily(
() => import("./pages/QuizAnswersPage/QuizAnswersPage"),
);
const ChatImageNewWindow = lazy(
() => import("@ui_kit/FloatingSupportChat/ChatImageNewWindow"),
);
dayjs.locale("ru");
const routeslink = [
{
path: "/edit",
page: EditPage,
header: true,
sidebar: true,
footer: true,
},
{
path: "/design",
page: DesignPage,
header: true,
sidebar: true,
footer: true,
},
] as const;
const LazyLoading = ({ children, fallback }: SuspenseProps) => (
<Suspense fallback={fallback ?? <></>}>{children}</Suspense>
);
function useUserAccountFetcher<T = UserAccount>({
onError,
onNewUserAccount,
url,
@ -108,25 +134,6 @@ export function useUserAccountFetcher<T = UserAccount>({
}, [url, userId]);
}
dayjs.locale("ru");
const routeslink = [
{
path: "/edit",
page: EditPage,
header: true,
sidebar: true,
footer: true,
},
{
path: "/design",
page: DesignPage,
header: true,
sidebar: true,
footer: true,
},
] as const;
export default function App() {
const userId = useUserStore((state) => state.userId);
const location = useLocation();
@ -240,11 +247,26 @@ export default function App() {
/>
}
/>
<Route path="/list" element={<MyQuizzesFull />} />
<Route path={"/view/:quizId"} element={<ViewPage />} />
<Route path={"/tariffs"} element={<Tariffs />} />
<Route path={"/analytics"} element={<Analytics/>}/>
<Route path={"/results/:quizId"} element={<QuizAnswersPage />} />
<Route
path="/list"
element={<LazyLoading children={<MyQuizzesFull />} />}
/>
<Route
path={"/view/:quizId"}
element={<LazyLoading children={<ViewPage />} />}
/>
<Route
path={"/tariffs"}
element={<LazyLoading children={<Tariffs />} />}
/>
<Route
path={"/analytics"}
element={<LazyLoading children={<Analytics />} />}
/>
<Route
path={"/results/:quizId"}
element={<LazyLoading children={<QuizAnswersPage />} />}
/>
<Route element={<PrivateRoute />}>
<Route path={"/image/:srcImage"} element={<ChatImageNewWindow />} />
{routeslink.map((e, i) => (
@ -252,11 +274,15 @@ export default function App() {
key={i}
path={e.path}
element={
<Main
Page={e.page}
header={e.header}
sidebar={e.sidebar}
footer={e.footer}
<LazyLoading
children={
<Main
Page={e.page}
header={e.header}
sidebar={e.sidebar}
footer={e.footer}
/>
}
/>
}
/>

5
yarn.lock
View File

@ -9525,6 +9525,11 @@ react-is@^18.0.0, react-is@^18.2.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
react-lazily@^0.9.2:
version "0.9.2"
resolved "https://registry.yarnpkg.com/react-lazily/-/react-lazily-0.9.2.tgz#74596dbde43c8e0f607445da5c4839cf6cc48ab5"
integrity sha512-oBVRDQ+SuMPWenBO/0Kq+iZk34lOYJEmjiTto4bYRufndf8pux3E50BT3mJZbsq0vBsAVbX3fpQjlUvsXgDVag==
react-redux@^7.2.0:
version "7.2.9"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"