bug fixed: loader time, initial page load on any route

src/App.js

@@ -1,68 +1,140 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import EmailVerify from './component/Authentication/EmailVerify/emailVerify';
-import ForgotPwd from './component/Authentication/ForgotPassword/forgotPwd';
-import Login from './component/Authentication/Login/login';
-import AuthOtp from './component/Authentication/OTP/otp';
-import ResetPwd from './component/Authentication/ResetPassword/resetPwd';
-import SignUp from './component/Authentication/SignUp/signUp';
-import Error from './component/Assets/Error404/Error';
-import SignUpTwo from './component/Authentication/SignUpTwo/SignUpTwo';
-import Sidebar from './component/Sidebar/SideBar';
-import HomePage from './component/Home Page/homePage';
-import CreateTweet from './component/Home Page/createTweet';
-import Bookmarks from './component/Bookmarks/bookmarks';
-import ProfilePage from './component/Profile/profilePage';
-import EditProfile from './component/Profile/EditProfile';
-import LogOut from './component/logOut/logOut';
-import Google from "./component/Authentication/GoogleSign/Google"
-import TagTweets from './component/Sidebar/TagTweets';
-import OneTweet from './component/Reply/OneTweet';
-import GoogleSignin from './component/Authentication/GoogleSign/GoogleSignIn';
-import Messages1 from './component/Messages/Messages1';
-import Chats from './component/Messages/Chats';
-import PrivateRoute from './component/PrivateRoute';
-import PhoneSearch from './component/Sidebar/PhoneSearch';
-import Notifications from './component/Notification/Notification';
-import AuthHome from './component/Authentication/AuthHome';
-import NotifTweet from './component/Notification/NotifTweet';
-import './App.css';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import EmailVerify from "./component/Authentication/EmailVerify/emailVerify";
+import ForgotPwd from "./component/Authentication/ForgotPassword/forgotPwd";
+import Login from "./component/Authentication/Login/login";
+import AuthOtp from "./component/Authentication/OTP/otp";
+import ResetPwd from "./component/Authentication/ResetPassword/resetPwd";
+import SignUp from "./component/Authentication/SignUp/signUp";
+import Error from "./component/Assets/Error404/Error";
+import SignUpTwo from "./component/Authentication/SignUpTwo/SignUpTwo";
+import Sidebar from "./component/Sidebar/SideBar";
+import HomePage from "./component/Home Page/homePage";
+import Bookmarks from "./component/Bookmarks/bookmarks";
+import ProfilePage from "./component/Profile/profilePage";
+import EditProfile from "./component/Profile/EditProfile";
+import LogOut from "./component/logOut/logOut";
+import Google from "./component/Authentication/GoogleSign/Google";
+import TagTweets from "./component/Sidebar/TagTweets";
+import OneTweet from "./component/Reply/OneTweet";
+import GoogleSignin from "./component/Authentication/GoogleSign/GoogleSignIn";
+import Messages1 from "./component/Messages/Messages1";
+import Chats from "./component/Messages/Chats";
+import PhoneSearch from "./component/Sidebar/PhoneSearch";
+import Notifications from "./component/Notification/Notification";
+import NotifTweet from "./component/Notification/NotifTweet";
+import PrivateRoute from "./component/PrivateRoute";
+import "./App.css";
 
 function App() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" exact element={<HomePage />} />
+          <Route path="/login" exact element={<Login />} />
+          <Route exact path="/fgtpwd" element={<ForgotPwd />} />
+          <Route exact path="/otp" element={<AuthOtp />} />
+          <Route exact path="/verifyemail" element={<EmailVerify />} />
+          <Route exact path="/reset" element={<ResetPwd />} />
+          <Route exact path="/signup" element={<SignUp />} />
+          <Route exact path="/signuptwo" element={<SignUpTwo />} />
+          <Route exact path="/googlesign" element={<GoogleSignin />} />
 
-  const isUser = localStorage.getItem("access token") ? true : false;
-  return <>
-    <BrowserRouter>
-      <Routes>
-        {/* {isUser?():(<Route path="/login" exact element={<Login />} />)} */}
-        <Route path="/" exact element={<HomePage />} />
-        <Route path="/login" exact element={<Login />} />
-        <Route exact path="/fgtpwd" element={<ForgotPwd />} />
-        <Route exact path="/otp" element={<AuthOtp />} />
-        <Route exact path="/verifyemail" element={<EmailVerify />} />
-        <Route exact path="/reset" element={<ResetPwd />} />
-        <Route exact path="/signup" element={<SignUp />} />
-        <Route exact path="/signuptwo" element={<SignUpTwo />} />
-        <Route exact path="/googlesign" element={<GoogleSignin />} />
-        {/* <Route path="/" exact element={<AuthHome />} /> */}
-
-        {/* {isUser ? ( <Route path="" exact element={<HomePage />} />) : (<Route path="/login" element={<Login />} />)} */}
-        {isUser ? (<Route path="/chats/:userid" element={<Chats />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/messages" element={<Messages1 />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/profile/:apiname" element={<ProfilePage />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/toTweet/:TweetId" element={<OneTweet />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/notiftweet/:TweetId" element={<NotifTweet />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/tagtweet" exact element={<TagTweets />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/bookmark" exact element={<Bookmarks />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/sidebar" exact element={<Sidebar />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/editprofile" exact element={<EditProfile />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/phonesearch" element={<PhoneSearch />} />) : (<Route path="/error" element={<Error />} />)}
-        {isUser ? (<Route path="/notification" exact element={<Notifications />} />) : (<Route path="/error" element={<Error />} />)}
-        <Route path="/google" element={<Google />} />
-        <Route path="/logout" exact element={<LogOut />} />
-        {/* <Route path="*" element={<Error />} /> */}
-      </Routes>
-    </BrowserRouter>
-  </>
+          <Route
+            path="/chats/:userid"
+            element={
+              <PrivateRoute>
+                <Chats />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/messages"
+            element={
+              <PrivateRoute>
+                <Messages1 />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/profile/:apiname"
+            element={
+              <PrivateRoute>
+                <ProfilePage />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/toTweet/:TweetId"
+            element={
+              <PrivateRoute>
+                <OneTweet />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/editprofile"
+            element={
+              <PrivateRoute>
+                <EditProfile />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/notification"
+            element={
+              <PrivateRoute>
+                <Notifications />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/phonesearch"
+            element={
+              <PrivateRoute>
+                <PhoneSearch />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/notiftweet/:TweetId"
+            element={
+              <PrivateRoute>
+                <NotifTweet />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/bookmark"
+            element={
+              <PrivateRoute>
+                <Bookmarks />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/sidebar"
+            element={
+              <PrivateRoute>
+                <Sidebar />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/tagtweet"
+            element={
+              <PrivateRoute>
+                <TagTweets />
+              </PrivateRoute>
+            }
+          />
+          <Route path="/google" element={<Google />} />
+          <Route path="/logout" exact element={<LogOut />} />
+          <Route path="*" element={<Error />} />
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
 }
 
 export default App;

src/component/Assets/Loader.jsx

@@ -1,16 +1,22 @@
-import React, { useEffect } from 'react'
-import { Spinner } from 'react-bootstrap';
+import React, { useEffect } from "react";
+import { Spinner } from "react-bootstrap";
 
-const Loader = (props) => {
-
-  return <>
-<Spinner animation="border" variant="light" id="loadSpinner" style={{
-   "zIndex": "200",
-    "position": "fixed",
-    "top": "45vh",
-    "left": "50vw"
-}} />
-  </>
-}
+const Loader = ({ time, loading }) => {
+  return (
+    <>
+      <Spinner
+        animation="border"
+        variant="light"
+        id="loadSpinner"
+        style={{
+          zIndex: "200",
+          position: "fixed",
+          top: "45vh",
+          left: "50vw",
+        }}
+      />
+    </>
+  );
+};
 
-export default Loader
+export default Loader;

src/component/Authentication/Login/login.jsx

@@ -72,13 +72,24 @@ function Login() {
     }
   }, [error, showErr, loading]);
 
+  const [loadTime, setLoadTime] = useState(10);
+  useEffect(()=>{
+      if(loading){
+          const time = loadTime >0 && setInterval(()=>{
+              setLoadTime((time)=> time-1);
+          },1000)
+
+          return ()=> clearInterval(time)
+      }
+  }, [loading, loadTime])
+
   useEffect(() => {
-    if (loading === true || loadingGoogle === true) {
-      document.body.style.opacity = 0.5;
-    } else {
-      document.body.style.opacity = 1;
-    }
-  }, [loading, loadingGoogle]);
+      if (loadTime>0 && (loading === true || loadingGoogle === true)) {
+        document.body.style.opacity = 0.5;
+      } else {
+        document.body.style.opacity = 1;
+      }
+  }, [loading, loadingGoogle, loadTime]);
 
   useEffect(() => {
     if (toFgtPwd && bool) {
@@ -101,11 +112,14 @@ function Login() {
     }
   }, [googleRed]);
 
-  const isUser = localStorage.getItem("access token") ? true : false;
-
-  useEffect(() => {
-    if (isUser) navigate("/");
-  }, [isUser]);
+     const accessToken = localStorage.getItem("access token");
+     const isUser = accessToken ? true : false;
+
+     useEffect(() => {
+       if (isUser) {
+         navigate("/");
+       }
+     }, [isUser]);
 
   return (
     <>
@@ -168,7 +182,7 @@ function Login() {
             </p>
           </div>
         </form>
-        {loading === true || loadingGoogle === true ? (
+        {loadTime>0 && (loading === true || loadingGoogle === true) ? (
           <Spinner animation="border" variant="light" id="loadSpinner" />
         ) : null}
         <ToastContainer />

src/component/Home Page/TweetComp.jsx

@@ -36,7 +36,6 @@ function Tweet(props) {
     const { tweetData } = useSelector((s) => s.TweetFeedReducer)
     useEffect(() => {
     if (localStorage.getItem('idx')==props.number) {
-        console.log("hi");
         const index = localStorage.getItem('idx');
         setReplyCount(replyCount+1); 
         localStorage.removeItem('idx')

src/component/Home Page/createTweet.jsx

@@ -71,7 +71,6 @@ function CreateTweet(props) {
   function handleSendVideo(e) {
     // var videooutput = document.getElementById("videoOutput");
     // videooutput.src = URL.createObjectURL(e.target.files[0])
-    console.log("---->");
     setVdoInArr(URL.createObjectURL(e.target.files[0]));
 
     setSendVideo(e.target.files[0]);

src/component/Home Page/homePage.jsx

@@ -18,11 +18,27 @@ function HomePage() {
     const { loading, tweetData, liked, bookmarked, privateRoute, trendingTweet } = useSelector((s) => s.TweetFeedReducer)
     const [tweeets, settweets] = useState([])
     const navigate = useNavigate()
-    const isUser = localStorage.getItem("access token") ? true : false;
-    useEffect(()=>{
-        if(!isUser)
-        navigate("/login")
-    },[isUser])
+
+    // access token
+    // const [token, setToken]= useState(null)
+    // async function getValue() {
+    //     const x = await localStorage.getItem("access token");
+    //     console.log(x)
+    //     setToken(x)
+    // }
+
+    // useEffect(()=>{
+    // getValue();
+    // },[])
+
+    const accessToken = localStorage.getItem("access token");
+    const isUser = accessToken ? true : false;
+
+    useEffect(() => {
+      if (!isUser) {
+        navigate("/login");
+      }
+    }, [isUser]);
 
     const { response } = useSelector((t) => t.TweetCreateReducer)
     useEffect(() => {
@@ -42,7 +58,6 @@ function HomePage() {
     const [count, setCount] = useState(1)
 
     function handleShowMoreTweet() {
-        // dispatch(TweetFeedCount())
         setCount(count+1)
         dispatch(TweetFeedAction2(count))
     }
@@ -55,14 +70,25 @@ function HomePage() {
         }
     }
 
+    const [loadTime, setLoadTime] = useState(2);
+    useEffect(()=>{
+        if(loading){
+            const time = loadTime >0 && setInterval(()=>{
+                setLoadTime((time)=> time-1);
+            },1000)
+
+            return ()=> clearInterval(time)
+        }
+    }, [loading, loadTime])
+
     useEffect(() => {
         if (loading === true) {
-            document.body.style.opacity = 0.5;
+          document.body.style.opacity = 0.5;
+        } else {
+          document.body.style.opacity = 1;
         }
-        else {
-            document.body.style.opacity = 1;
-        }
-    }, [loading])
+      }, [loading]);
+
     return <>
         <Sidebar />
         <div className="HOMEPAGE">
@@ -89,7 +115,7 @@ function HomePage() {
             })) : null}
         </div>
 
-        {(loading === true) ? <Loader loading={loading} /> : null}
+        {(loading === true) ? <Loader loading={loading} time={loadTime} /> : null}
         <ToastContainer />
     </>
 }