From f82d91687fdaeb46346e051fbd317c0fd670138c Mon Sep 17 00:00:00 2001
From: aunshx <aunsh.sb@gmail.com>
Date: Thu, 5 Sep 2024 16:08:08 -0700
Subject: [PATCH] Team UI Fixes and Particle loading fixed

---
 src/App.js                                    | 39 ++++++++-----------
 src/Components/Pages/Team/index.js            | 20 ++++++----
 .../TransComps/Components/Overview.js         |  2 +-
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/App.js b/src/App.js
index 877a3be..77bd83d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,7 @@ export const BorderToggleRef = () => {
 }
 
 const PreSynthApp = () => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isParticleLoading, setIsParticleLoading] = useState(false);
   const [init, setInit] = useState(false);
   const { toggleLightTheme, toggleDarkTheme } = useContext(ThemeContext);
 
@@ -40,7 +40,7 @@ const PreSynthApp = () => {
   useEffect(() => {
     const initEngine = async () => {
       try {
-        setIsLoading(true);
+        setIsParticleLoading(true);
         await initParticlesEngine(async (engine) => {
           await loadSlim(engine);
         });
@@ -48,41 +48,34 @@ const PreSynthApp = () => {
       } catch (error) {
         console.error("Initialization failed:", error);
       } finally {
-        setIsLoading(false);
+        setIsParticleLoading(false);
       }
     };
     initEngine();
   }, []);
 
-  const particlesLoaded = (container) => {
-  };
+  const particlesLoaded = (container) => {};
 
 
 
   return (
     <>
-      {isMobile ? (
+      {false ? (
         <OnlyDesktop />
       ) : (
-          <>
-            {false ? (
-              <Loader />
-            ) : (
-              <Router>
-                <Routes>
-                    <Route index element={<Navigate to={`${URL_REROUTE_PAGE}`} />} />
+        <Router>
+          <Routes>
+              <Route index element={<Navigate to={`${URL_REROUTE_PAGE}`} />} />
 
-                    <Route path={`${URL_TEAM_PAGE}`} element={<Team />} />
-                    <Route path={`${URL_HOME_PAGE}`} element={<Home />} />
-                    <Route path={`${URL_VISUALIZER_PAGE}`} element={<Visualizer />} />
-                    
-                  <Route path='*' element={<NotFound />} />
-                </Routes>
-              </Router>
-            )}
-            <ParticleWrapper init={init} particlesLoaded={particlesLoaded} />
-          </>
+              <Route path={`${URL_TEAM_PAGE}`} element={<Team loading={isParticleLoading} />} />
+              <Route path={`${URL_HOME_PAGE}`} element={<Home />} />
+              <Route path={`${URL_VISUALIZER_PAGE}`} element={<Visualizer />} />
+              
+            <Route path='*' element={<NotFound />} />
+          </Routes>
+        </Router>
       )}
+      <ParticleWrapper init={init} particlesLoaded={particlesLoaded} />
     </>
   );
 }
diff --git a/src/Components/Pages/Team/index.js b/src/Components/Pages/Team/index.js
index a559d36..cece27d 100644
--- a/src/Components/Pages/Team/index.js
+++ b/src/Components/Pages/Team/index.js
@@ -1,13 +1,14 @@
 import React, { useContext } from 'react';
+import { BorderToggleRef } from '../../../App';
+import { NavbarToggleContext } from '../../../Context/navbarToggle';
 import { teamIcon } from '../../../Resources/Icons';
+import Footer from '../../Shared/Footer';
+import Loader from '../../Shared/Loader';
+import Navbar from '../../Shared/Navbar';
 import Title, { Subtitle } from '../../Shared/Title';
 import Wrapper from '../../Shared/Wrapper';
 import { CurrentTeamCard, PastMembersCard } from './Ancilliary/Components/Card';
 import { currentTeam, pastMembers } from './Ancilliary/Data/data';
-import { NavbarToggleContext } from '../../../Context/navbarToggle';
-import Navbar from '../../Shared/Navbar';
-import { BorderToggleRef } from '../../../App';
-import Footer from '../../Shared/Footer';
 
 const Team = () => {
   return (
@@ -42,13 +43,18 @@ const Team = () => {
   );
 }
 
-const Index = () => {
+const Index = ({ loading }) => {
   const { borderToggle } = useContext(NavbarToggleContext);
+
   return (
     <>
-      <Navbar borderToggle={borderToggle} />
+      <Navbar borderToggle = { borderToggle } />
       <BorderToggleRef />
-      <Team />
+      {loading ? (
+          <Loader />
+      ) : (
+        <Team />
+      )}
       <Footer />
     </>
   );
diff --git a/src/Components/Pages/Visualizer/TransComps/Components/Overview.js b/src/Components/Pages/Visualizer/TransComps/Components/Overview.js
index 1bcb51f..06b7e66 100644
--- a/src/Components/Pages/Visualizer/TransComps/Components/Overview.js
+++ b/src/Components/Pages/Visualizer/TransComps/Components/Overview.js
@@ -20,7 +20,7 @@ const Overview = ({ goToElement }) => {
           />
         <FontVarTitle title={'Overview'} />
       </div>
-      <div className="overflow-y-scroll h-full">
+      <div className="overflow-y-scroll h-full scrollbar">
         <SmallTable />
       </div>
       <div className='w-full flex items-center justify-center gap-x-2 border-t-3p border-solid border-gray-700 dark:border-gray-50 cursor-pointer hover:dark:bg-green-80 h-60p' onClick={() => goToElement("transaction-table")}>