From 8ead0d00f5e5e81673d1647d79929138c49604da Mon Sep 17 00:00:00 2001
From: UnknownRori <68576836+UnknownRori@users.noreply.github.com>
Date: Sun, 27 Aug 2023 17:51:49 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implement=20Lazy=20Loading=20for?=
=?UTF-8?q?=20`Router`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.tsx | 8 ++--
src/components/animation/LoadingSpinner.tsx | 10 +++++
src/components/navigation/RouterView.tsx | 42 +++++++++++++++++++++
src/router/router.tsx | 10 +++--
4 files changed, 63 insertions(+), 7 deletions(-)
create mode 100644 src/components/animation/LoadingSpinner.tsx
create mode 100644 src/components/navigation/RouterView.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 5c9b4c4..8002e1c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import Background from "@/components/animation/Background";
import Footer from '@/components/navigation/Footer';
import Navbar from '@/components/navigation/Navbar';
import Sidebar from '@/components/navigation/Sidebar';
+import RouterView from "@/components/navigation/RouterView";
import useRoute, { RouterContext } from "@/hooks/useRoute";
import router from "@/router/router";
@@ -16,10 +17,11 @@ export default function App() {
+
- <>
- {currentPage}
- >
+
+
+
>
diff --git a/src/components/animation/LoadingSpinner.tsx b/src/components/animation/LoadingSpinner.tsx
new file mode 100644
index 0000000..1244080
--- /dev/null
+++ b/src/components/animation/LoadingSpinner.tsx
@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+
+export default function() {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/navigation/RouterView.tsx b/src/components/navigation/RouterView.tsx
new file mode 100644
index 0000000..14ed9e1
--- /dev/null
+++ b/src/components/navigation/RouterView.tsx
@@ -0,0 +1,42 @@
+import { Suspense, useEffect, useState } from 'react';
+
+import LoadingSpinner from '@/components/animation/LoadingSpinner';
+
+function FallbackView() {
+ const MAXIMUM_DOT = 3;
+
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (count < MAXIMUM_DOT) {
+ setCount(count + 1);
+ } else {
+ setCount(0);
+ }
+ }, 1000);
+
+ return () => {
+ clearInterval(interval);
+ }
+ })
+
+ return (
+
+
+
+
+ Please wait warmly{".".repeat(count)}
+
+
+
+ )
+}
+
+export default function(props: { page: JSX.Element }) {
+ return (
+ }>
+ {props.page}
+
+ );
+}
\ No newline at end of file
diff --git a/src/router/router.tsx b/src/router/router.tsx
index 3fef683..8ffc8a1 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -1,7 +1,9 @@
-import NotFound from "@/page/404";
-import AboutMePage from "@/page/AboutMe";
-import MyProfilePage from '@/page/MyProfile';
-import MyProjectsPage from "@/page/MyProjects";
+import React from 'react';
+
+const NotFound = React.lazy(() => import("@/page/404"));
+const AboutMePage = React.lazy(() => import("@/page/AboutMe"));
+const MyProfilePage = React.lazy(() => import("@/page/MyProfile"));
+const MyProjectsPage = React.lazy(() => import("@/page/MyProjects"));
/**
* A definition for my custom router hook