Fix issue 156 : Preloader

Frontend/.env.sample

@@ -6,4 +6,4 @@ REACT_APP_FIREBASE_PROJECT_ID=
 REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
-REACT_APP_FIREBASE_MEASUREMENT_ID=
+REACT_APP_FIREBASE_MEASUREMENT_ID=

Frontend/package.json

@@ -3,51 +3,51 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-      "@testing-library/jest-dom": "^5.17.0",
-      "@testing-library/react": "^13.4.0",
-      "@testing-library/user-event": "^13.5.0",
-      "axios": "^1.6.3",
-      "chart.js": "^4.4.1",
-      "chartjs-adapter-date-fns": "^3.0.0",
-      "date-fns": "^3.0.6",
-      "firebase": "^10.7.1",
-      "marked": "^11.1.1",
-      "react": "^18.2.0",
-      "react-chartjs-2": "^5.2.0",
-      "react-cookie": "^7.0.0",
-      "react-dom": "^18.2.0",
-      "react-icons": "^4.12.0",
-      "react-markdown": "^9.0.1",
-      "react-router-dom": "^6.21.1",
-      "react-scripts": "5.0.1",
-      "react-toastify": "^10.0.5",
-      "web-vitals": "^2.1.4"
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.3",
+        "chart.js": "^4.4.1",
+        "chartjs-adapter-date-fns": "^3.0.0",
+        "date-fns": "^3.0.6",
+        "firebase": "^10.14.0",
+        "marked": "^11.1.1",
+        "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
+        "react-cookie": "^7.0.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.12.0",
+        "react-markdown": "^9.0.1",
+        "react-router-dom": "^6.21.1",
+        "react-scripts": "5.0.1",
+        "react-toastify": "^10.0.5",
+        "web-vitals": "^2.1.4"
     },
     "scripts": {
-      "start": "react-scripts start",
-      "build": "react-scripts build",
-      "test": "react-scripts test",
-      "eject": "react-scripts eject"
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
     },
     "eslintConfig": {
-      "extends": [
-        "react-app",
-        "react-app/jest"
-      ]
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
     },
     "browserslist": {
-      "production": [
-        ">0.2%",
-        "not dead",
-        "not op_mini all"
-      ],
-      "development": [
-        "last 1 chrome version",
-        "last 1 firefox version",
-        "last 1 safari version"
-      ]
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
     },
     "devDependencies": {
-      "tailwindcss": "^3.4.0"
+        "tailwindcss": "^3.4.0"
     }
-  }
+}

Frontend/src/App.js

@@ -2,18 +2,20 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Homepage from "./pages/homepage/homepage";
 import LoginPage from "./pages/login/login";
 import Message from "./pages/message/message";
-import { useContext, useEffect } from "react";
-import { Cookies, useCookies } from "react-cookie";
+import { useContext, useEffect, useState } from "react";
 import axios from "axios";
 import LoginContext from "./context/context";
 import { PrivateRoute } from "./components/router/PrivateRouter";
 import { PrivateRouteAnalysis } from "./components/router/PrivateRouterAnalysis";
 import Analysis from "./pages/analysis/analysis";
 import Error from "./pages/error/error";
 import AboutPage from "./pages/AboutUs/AboutPage";
+import Preloader from "./pages/Preloader/Preloader";
 
 function App() {
   const { login } = useContext(LoginContext);
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     async function isUser() {
       try {
@@ -29,34 +31,45 @@ function App() {
         }
       } catch (error) {
         console.log(error.message);
+      } finally {
+        // Keep preloader visible for at least 1 second
+        setTimeout(() => {
+          setLoading(false); // Set loading to false after the timeout
+        }, 1000);
       }
     }
+
     isUser();
-  }, []);
+  }, [login]);
+
   return (
     <BrowserRouter>
-      <Routes>
-        <Route
-          path="/login"
-          element={
-            <PrivateRoute>
-              <LoginPage />
-            </PrivateRoute>
-          }
-        />
-        <Route path="/" element={<Homepage />} />
-        <Route path="/message" element={<Message />} />
-        <Route
-          path="/analysis"
-          element={
-            <PrivateRouteAnalysis>
-              <Analysis />
-            </PrivateRouteAnalysis>
-          }
-        />
-        <Route path="/aboutus" element={<AboutPage />} />
-        <Route path="*" element={<Error />} />
-      </Routes>
+      {loading ? (
+        <Preloader /> // Show Preloader while loading
+      ) : (
+        <Routes>
+          <Route
+            path="/login"
+            element={
+              <PrivateRoute>
+                <LoginPage />
+              </PrivateRoute>
+            }
+          />
+          <Route path="/" element={<Homepage />} />
+          <Route path="/message" element={<Message />} />
+          <Route
+            path="/analysis"
+            element={
+              <PrivateRouteAnalysis>
+                <Analysis />
+              </PrivateRouteAnalysis>
+            }
+          />
+          <Route path="/aboutus" element={<AboutPage />} />
+          <Route path="*" element={<Error />} />
+        </Routes>
+      )}
     </BrowserRouter>
   );
 }

Frontend/src/firebase/firebase.js

@@ -1,4 +1,5 @@
 // Import the functions you need from the SDKs you need
+// Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import {
@@ -47,17 +48,17 @@ async function LoginWithGoogle() {
     //  //from here we will send data to backend to store the email
     // const info = getAdditionalUserInfo(data).isNewUser; //If this is true we will send the mail along with uid of firebase and uuid of chat
     //  // If this is false we will just user the access token...
-      const headers = {
-        token: "Bearer " + user.accessToken,
-      };
-      console.log(headers);
+    const headers = {
+      token: "Bearer " + user.accessToken,
+    };
+    console.log(headers);
+
+    const signup = await axios.post(
+      process.env.REACT_APP_API_LINK + "/signupWithGoogle",
+      {},
+      { headers, withCredentials: true }
+    );
 
-      const signup = await axios.post(
-        process.env.REACT_APP_API_LINK + "/signupWithGoogle",
-        {},
-        { headers, withCredentials: true }
-      );
-
     return true;
   } catch (error) {
     console.log(error.message);

Frontend/src/pages/Preloader/Preloader.css

@@ -0,0 +1,28 @@
+.loading-bar {
+  width: 100%; /* Start from full width */
+  animation: load 2s linear infinite; /* Make it continuous */
+}
+
+@keyframes load {
+  0% {
+    transform: translateX(-100%); /* Start from left outside the container */
+  }
+  100% {
+    transform: translateX(100%); /* Move to right outside the container */
+  }
+}
+
+.dot-animation {
+  display: inline-block;
+  color: #3B82F6; /* Optional: Change the color of the dots */
+  animation: blink 1.5s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { 
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

Frontend/src/pages/Preloader/Preloader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Logo } from '../../svgs/logoSVG';
+import './Preloader.css';
+
+const Preloader = () => {
+  return (
+    <div className="flex items-center justify-center w-screen h-screen bg-gray-100">
+      <div className="relative flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-lg h-52 w-96"> {/* Make the card relative */}
+        <div className="mb-4 animate-bounce">
+          <Logo size={80} />
+        </div>
+        <div className="flex items-center justify-center">
+          <p className="text-xl font-semibold text-center text-gray-800 whitespace-nowrap">
+            MindMate: Analyzing Chat
+          </p>
+          <span className="mt-0 ml-2 text-3xl dot-animation">...</span>
+        </div>
+        {/* Loading Effect */}
+        <div className="absolute bottom-0 left-0 w-full h-1 overflow-hidden bg-gray-200">
+          <div className="h-full bg-blue-500 loading-bar"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Preloader;

Frontend/src/pages/homepage/homepage.js

@@ -9,7 +9,7 @@ import { useContext, useRef } from "react";
 import LoginContext from "../../context/context";
 import Articles from "../Articles/Articles";
 import piechart from "../../svgs/piechart.png";
-
+import Preloader from "../Preloader/Preloader";
 function Homepage() {
   const navigate = useNavigate();
   const { logout, loggedIn } = useContext(LoginContext);
@@ -126,14 +126,14 @@ function Homepage() {
         <Link to={"/aboutus"}>Read More....</Link>
       </section>
       <section className={`mt-8 ${styles.statsBox}`}>
-        <h1 className="text-center text-4xl font-bold mb-8">
+        <h1 className="mb-8 text-4xl font-bold text-center">
           Mental health Issues are Common
         </h1>
         <div className={styles.statsSection}>
           <div>
             <img src={piechart} alt="" />
           </div>
-          <div className="text-center flex flex-col justify-center gap-4">
+          <div className="flex flex-col justify-center gap-4 text-center">
             <h2 className="text-2xl">Do You know?</h2>
             <p className="text-lg text-justify">
               Mental health conditions are not uncommon. Hundreds of millions
@@ -147,7 +147,7 @@ function Homepage() {
         </div>
       </section>
       <section className="mt-8" ref={articles}>
-        <h1 className="text-center text-3xl font-bold">Editor's Pick</h1>
+        <h1 className="text-3xl font-bold text-center">Editor's Pick</h1>
         <div className="xl:m-auto">
           <div className={styles.Articles}>
             <Articles
@@ -186,9 +186,9 @@ function Homepage() {
         </div>
       </section>
       <footer className={styles.footer}>
-        <div className="m-auto h-full" style={{ maxWidth: "1320px" }}>
+        <div className="h-full m-auto" style={{ maxWidth: "1320px" }}>
           <div className="grid grid-cols-2 h-5/6">
-            <div className="flex flex-col justify-center items-center gap-3 text-lg">
+            <div className="flex flex-col items-center justify-center gap-3 text-lg">
               <div onClick={aboutClick} className="cursor-pointer">
                 <Link to={"/aboutus"}> About</Link>
               </div>
@@ -204,18 +204,18 @@ function Homepage() {
                 Chat
               </div>
             </div>
-            <div className="flex flex-col justify-center items-center gap-3 text-lg">
+            <div className="flex flex-col items-center justify-center gap-3 text-lg">
               <a
                 href="https://github.com/subharthihazra/MindMate"
                 target="_blank"
-                className=" text-white"
+                className="text-white "
               >
                 <div>Github</div>
               </a>
               <a
                 href="https://www.youtube.com/watch?v=fUD5HcZhtQI"
                 target="_blank"
-                className=" text-white"
+                className="text-white "
               >
                 <div>Youtube</div>
               </a>