perf: code splitting

homocodian · Nov 14, 2022 · 52ff9d7 · 52ff9d7
1 parent 863f7d8
commit 52ff9d7
Show file tree

Hide file tree

Showing 10 changed files with 803 additions and 4,497 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@capacitor/status-bar": "^4.0.1",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@loadable/component": "^5.15.2",
     "@mui/icons-material": "^5.8.0",
     "@mui/lab": "^5.0.0-alpha.82",
     "@mui/material": "^5.8.0",
@@ -30,6 +31,7 @@
   "devDependencies": {
     "@capacitor/cli": "^4.3.0",
     "@testing-library/cypress": "^8.0.2",
+    "@types/loadable__component": "^5.13.4",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
     "@vitejs/plugin-react": "^1.3.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,67 +5,76 @@ import { useTernaryDarkMode } from "usehooks-ts";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { Capacitor } from "@capacitor/core";
 import { StatusBar, Style } from "@capacitor/status-bar";
+import loadable from "@loadable/component";
 
-import Home from "./pages/Home";
-import SignIn from "./pages/SignIn";
-import SignUp from "./pages/SignUp";
 import Seperator from "./components/Seperator";
 import { PrivateRoute, MenuAppBar } from "./components";
 import { getDesignTokens } from "./utils/getDesignToken";
 import { AccountMenuProvider, DrawerProvider } from "./context";
 import NotesCategoryProvider from "./context/NotesCategoryProvider";
+import Loading from "./components/Loading";
+
+const HomePage = loadable(() => import("./pages/Home"));
+const SignInPage = loadable(() => import("./pages/SignIn"));
+const SignUpPage = loadable(() => import("./pages/SignUp"));
 
 async function changeStatusbarColor(isDarkMode: boolean) {
-  if (Capacitor.getPlatform() === "android") {
-    if (isDarkMode) {
-      await StatusBar.setBackgroundColor({ color: "#121212" });
-    } else {
-      await StatusBar.setBackgroundColor({ color: "#ff5722" });
-    }
-    await StatusBar.setStyle({ style: Style.Dark });
-  }
+	if (Capacitor.getPlatform() === "android") {
+		if (isDarkMode) {
+			await StatusBar.setBackgroundColor({ color: "#121212" });
+		} else {
+			await StatusBar.setBackgroundColor({ color: "#ff5722" });
+		}
+		await StatusBar.setStyle({ style: Style.Dark });
+	}
 }
 
 function App() {
-  // get theme value from localstorage
-  const { isDarkMode } = useTernaryDarkMode();
+	// get theme value from localstorage
+	const { isDarkMode } = useTernaryDarkMode();
 
-  // returns theme object for mui
-  const theme = useMemo(() => {
-    if (isDarkMode) document.body.style.backgroundColor = "#18181b";
-    else document.body.style.backgroundColor = "#fff";
-    return createTheme(getDesignTokens(isDarkMode ? "dark" : "light"));
-  }, [isDarkMode]);
+	// returns theme object for mui
+	const theme = useMemo(() => {
+		if (isDarkMode) document.body.style.backgroundColor = "#18181b";
+		else document.body.style.backgroundColor = "#fff";
+		return createTheme(getDesignTokens(isDarkMode ? "dark" : "light"));
+	}, [isDarkMode]);
 
-  changeStatusbarColor(isDarkMode);
+	changeStatusbarColor(isDarkMode);
 
-  return (
-    <ThemeProvider theme={theme}>
-      <DrawerProvider>
-        <AccountMenuProvider>
-          <MenuAppBar />
-          <Seperator>
-            <Routes>
-              <Route path="/">
-                <Route
-                  index
-                  element={
-                    <PrivateRoute>
-                      <NotesCategoryProvider>
-                        <Home />
-                      </NotesCategoryProvider>
-                    </PrivateRoute>
-                  }
-                />
-                <Route path="signup" element={<SignUp />} />
-                <Route path="login" element={<SignIn />} />
-              </Route>
-            </Routes>
-          </Seperator>
-        </AccountMenuProvider>
-      </DrawerProvider>
-    </ThemeProvider>
-  );
+	return (
+		<ThemeProvider theme={theme}>
+			<DrawerProvider>
+				<AccountMenuProvider>
+					<MenuAppBar />
+					<Seperator>
+						<Routes>
+							<Route path="/">
+								<Route
+									index
+									element={
+										<PrivateRoute>
+											<NotesCategoryProvider>
+												<HomePage fallback={<Loading />} />
+											</NotesCategoryProvider>
+										</PrivateRoute>
+									}
+								/>
+								<Route
+									path="signup"
+									element={<SignUpPage fallback={<Loading />} />}
+								/>
+								<Route
+									path="login"
+									element={<SignInPage fallback={<Loading />} />}
+								/>
+							</Route>
+						</Routes>
+					</Seperator>
+				</AccountMenuProvider>
+			</DrawerProvider>
+		</ThemeProvider>
+	);
 }
 
 export default App;
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+import lottie from "lottie-web";
+
+function Loading() {
+	const animationContainer = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		if (animationContainer.current) {
+			lottie
+				.loadAnimation({
+					container: animationContainer.current,
+					// @ts-ignore
+					animationData: require("../animation/loading.json"),
+					autoplay: true,
+					loop: true,
+					renderer: "svg",
+				})
+				.play();
+		}
+	}, []);
+
+	return (
+		<div className="container">
+			<div className="animation-container" ref={animationContainer} />
+		</div>
+	);
+}
+
+export default Loading;
diff --git a/src/components/MenuAppBar.tsx b/src/components/MenuAppBar.tsx
@@ -1,42 +1,46 @@
-import { Menu as MenuIcon } from "@mui/icons-material";
-import { Box, AppBar, Toolbar, Typography, IconButton } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
 
 import AccountMenu from "./AccountMenu";
 import SelectAppTheme from "./SelectAppTheme";
 import { useAuth } from "../context/AuthContext";
 import { useDrawer } from "../context/DrawerContext";
 
 function MenuAppBar() {
-  const { user } = useAuth();
-  const { isDrawerOpen, setDrawerIsOpen } = useDrawer();
+	const { user } = useAuth();
+	const { isDrawerOpen, setDrawerIsOpen } = useDrawer();
 
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="fixed">
-        <Toolbar>
-          {user && (
-            <IconButton
-              size="large"
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-              sx={{ mr: 2 }}
-              onClick={() => {
-                setDrawerIsOpen(!isDrawerOpen);
-              }}
-            >
-              <MenuIcon />
-            </IconButton>
-          )}
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Notes
-          </Typography>
-          {user ? <AccountMenu /> : null}
-          <SelectAppTheme />
-        </Toolbar>
-      </AppBar>
-    </Box>
-  );
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<AppBar position="fixed">
+				<Toolbar>
+					{user && (
+						<IconButton
+							size="large"
+							edge="start"
+							color="inherit"
+							aria-label="menu"
+							sx={{ mr: 2 }}
+							onClick={() => {
+								setDrawerIsOpen(!isDrawerOpen);
+							}}
+						>
+							<MenuIcon />
+						</IconButton>
+					)}
+					<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+						Notes
+					</Typography>
+					{user ? <AccountMenu /> : null}
+					<SelectAppTheme />
+				</Toolbar>
+			</AppBar>
+		</Box>
+	);
 }
 
 export default MenuAppBar;