Code splitting and Sidebar/LoginPage styling changes

HackerSchool · Feb 3, 2024 · 90a6173 · 90a6173
1 parent 387c60a
commit 90a6173
Show file tree

Hide file tree

Showing 12 changed files with 432 additions and 314 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -430,8 +430,7 @@ aside {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.7);
-  border-radius: 0 1rem 1rem 0;
+  box-shadow: -4px 0px 10px 4px rgba(0, 0, 0, 0.7);
   z-index: 3;
 }
 
@@ -441,11 +440,10 @@ aside {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 10px;
   gap: 50px;
   height: 100%;
   max-width: 250px;
-  padding: 3.5rem 1.5rem;
+  padding: 3.5rem 0rem;
 }
 
 .sidebar-routes-container {
@@ -454,30 +452,38 @@ aside {
   justify-content: space-between;
   margin-bottom: auto;
   gap: 35px;
+  max-width: 100%;
 }
 
 .nav-item {
   border: 0 solid transparent;
-  border-radius: 2rem;
-  padding: 0.8rem 0 0.8rem 1.5rem;
+  padding: 0.8rem 0 0.8rem 3rem;
   font-size: 1.1rem;
-  min-width: 13rem;
+  width: 16rem;
+  max-width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   color: var(--green);
-  transition: none 0.4s ease-in-out 0s;
+  transition: none 0.4s ease-out 0s;
   transition-property: color, background-color;
 }
 
 .nav-item.active {
+  background: linear-gradient(
+    to left,
+    var(--cinza-1) -2%,
+    rgba(0, 0, 0, 0.3) 15%,
+    rgba(0, 0, 0, 0.12) 20%,
+    rgba(0, 0, 0, 0.03) 23%,
+    transparent 25%
+  );
   background-color: var(--hs-logo);
   color: white;
-  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.5);
-  transition: none 0.7s ease-out 0s;
-  transition-property: color, background-color, box-shadow;
+  transition: none 0.5s ease-out 0s;
+  transition-property: color, background;
 }
 
 #logo-img {

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,15 +1,16 @@
 import { Routes, Route, Navigate } from "react-router-dom";
-import { React, useEffect, useState } from "react";
+import { React, useEffect, useState, lazy, Suspense } from "react";
 import "./App.css";
 import axios_instance from "./Axios";
 import { showErrorMsg } from "./Alerts";
-import Home from "./components/Home";
-import LoginPage from "./pages/Login";
-import DashboardPage from "./pages/Dashboard";
-import TransactionsPage from "./pages/Transactions";
-import ProjectsPage from "./pages/Projects";
-import ChartsPage from "./pages/Charts";
-import SettingsPage from "./pages/Settings";
+const Home = lazy(() => import("./components/Home"));
+const LoginPage = lazy(() => import("./pages/Login"));
+const DashboardPage = lazy(() => import("./pages/Dashboard"));
+const TransactionsPage = lazy(() => import("./pages/Transactions"));
+const ProjectsPage = lazy(() => import("./pages/Projects"));
+const ChartsPage = lazy(() => import("./pages/Charts"));
+const SettingsPage = lazy(() => import("./pages/Settings"));
+import CircularProgress from "@mui/material/CircularProgress";
 
 function App() {
   const [user, setUser] = useState();
@@ -88,21 +89,39 @@ function App() {
   return (
     <div className="App">
       {user !== undefined && (
-        <Routes>
-          {!user && <Route path="/login" element={<LoginPage />} />}
-          {user && (
-            <Route path="/home" element={<Home user={user} />}>
-              <Route index element={<Navigate to="dashboard" />} />
-              <Route path="dashboard" element={<DashboardPage />} />
-              <Route path="transactions" element={<TransactionsPage />} />
-              <Route path="projects" element={<ProjectsPage />} />
-              <Route path="charts" element={<ChartsPage />} />
-              <Route path="settings" element={<SettingsPage />} />
-              <Route path="*" element={<Navigate to="dashboard" />} />
-            </Route>
-          )}
-          <Route path="*" element={user ? <Navigate to="/home" /> : <Navigate to="/login" />} />
-        </Routes>
+        <Suspense
+          fallback={
+            <div
+              style={{
+                height: "100svh",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <CircularProgress className="loading-circle large" />
+              <p>Loading page...</p>
+            </div>
+          }
+        >
+          <Routes>
+            {!user && <Route path="/login" element={<LoginPage />} />}
+            {user && (
+              <Route path="/home" element={<Home user={user} />}>
+                <Route index element={<Navigate to="dashboard" />} />
+                <Route path="dashboard" element={<DashboardPage />} />
+                <Route path="transactions" element={<TransactionsPage />} />
+                <Route path="projects" element={<ProjectsPage />} />
+                <Route path="charts" element={<ChartsPage />} />
+                <Route path="settings" element={<SettingsPage />} />
+                <Route path="*" element={<Navigate to="dashboard" />} />
+              </Route>
+            )}
+            <Route path="*" element={user ? <Navigate to="/home" /> : <Navigate to="/login" />} />
+          </Routes>
+        </Suspense>
       )}
     </div>
   );

diff --git a/frontend/src/components/BalanceTimeSeries.jsx b/frontend/src/components/BalanceTimeSeries.jsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, lazy, Suspense } from "react";
 import { NavLink } from "react-router-dom";
-import Plot from "react-plotly.js";
+const Plot = lazy(() => import("react-plotly.js"));
+import CircularProgress from "@mui/material/CircularProgress";
 
 const today = new Date().toISOString().slice(0, 10);
 const monthAgo = new Date();
@@ -98,53 +99,72 @@ function BalanceTimeSeries({ transactions, loading, disableRange, inDashboard })
   }
 
   return (
-    <Plot
-      data={[
-        {
-          x: dates,
-          y: balanceVal,
-          type: "scatter",
-          mode: "lines+markers+text",
-          line: { color: "6bba75", width: 1.5 },
-          marker: { color: "white", size: 6 },
-          text: balanceVal,
-          textposition: "top center",
-          hoverinfo: "x+y",
-        },
-      ]}
-      config={{
-        modeBarButtonsToRemove: ["select2d", "lasso2d", "resetScale2d"],
-        displaylogo: false,
-      }}
-      layout={{
-        yaxis: {
-          showgrid: true,
-          gridcolor: "#474747",
-          showline: true,
-          zeroline: true,
-          zerolinecolor: "#ffffff",
-          hoverformat: ".2f",
-          linecolor: "#ffffff",
-          type: "linear",
-        },
-        modebar: { orientation: "v", bgcolor: "rgba(0,0,0,0)" },
-        xaxis: xaxisconfig,
-        width: 580,
-        height: inDashboard ? 283 : 383,
-        margin: {
-          t: disableRange ? 10 : 50,
-          b: disableRange ? 20 : 15,
-          l: inDashboard ? 40 : 45,
-          r: inDashboard ? 40 : 45,
-        },
-        autosize: false,
-        plot_bgcolor: "rgba(0,0,0,0)",
-        paper_bgcolor: "rgba(0,0,0,0)",
-        font: {
-          color: "#ffffff",
-        },
-      }}
-    />
+    <Suspense
+      fallback={
+        <div
+          style={{
+            width: 580,
+            height: inDashboard ? 283 : 383,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 10,
+          }}
+        >
+          <CircularProgress className="loading-circle large" />
+          <p>Loading plot resources...</p>
+        </div>
+      }
+    >
+      <Plot
+        data={[
+          {
+            x: dates,
+            y: balanceVal,
+            type: "scatter",
+            mode: "lines+markers+text",
+            line: { color: "6bba75", width: 1.5 },
+            marker: { color: "white", size: 6 },
+            text: balanceVal,
+            textposition: "top center",
+            hoverinfo: "x+y",
+          },
+        ]}
+        config={{
+          modeBarButtonsToRemove: ["select2d", "lasso2d", "resetScale2d"],
+          displaylogo: false,
+        }}
+        layout={{
+          yaxis: {
+            showgrid: true,
+            gridcolor: "#474747",
+            showline: true,
+            zeroline: true,
+            zerolinecolor: "#ffffff",
+            hoverformat: ".2f",
+            linecolor: "#ffffff",
+            type: "linear",
+          },
+          modebar: { orientation: "v", bgcolor: "rgba(0,0,0,0)" },
+          xaxis: xaxisconfig,
+          width: 580,
+          height: inDashboard ? 283 : 383,
+          margin: {
+            t: disableRange ? 10 : 50,
+            b: disableRange ? 20 : 15,
+            l: inDashboard ? 40 : 45,
+            r: inDashboard ? 40 : 45,
+          },
+          autosize: false,
+          plot_bgcolor: "rgba(0,0,0,0)",
+          paper_bgcolor: "rgba(0,0,0,0)",
+          font: {
+            color: "#ffffff",
+          },
+        }}
+      />
+    </Suspense>
   );
 }
 

diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
@@ -1,12 +1,31 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import Sidebar from "./Sidebar";
+import CircularProgress from "@mui/material/CircularProgress";
 
 function Home({ user }) {
   return (
     <>
       <Sidebar user={user} />
-      <Outlet />
+      <Suspense
+        fallback={
+          <div
+            style={{
+              height: "100svh",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10,
+            }}
+          >
+            <CircularProgress className="loading-circle large" />
+            <p>Loading page...</p>
+          </div>
+        }
+      >
+        <Outlet />
+      </Suspense>
     </>
   );
 }