added loader for suspence and fetching home page

src/components/CurrentSection.js

@@ -16,7 +16,13 @@ import {
 } from "react-router-dom";
 
 import { AnimatePresence } from "framer-motion";
-import { Tabs, Tab, withStyles } from "@material-ui/core";
+import {
+  Tabs,
+  Tab,
+  withStyles,
+  Grid,
+  CircularProgress
+} from "@material-ui/core";
 import {
   Home,
   Favorite,
@@ -95,6 +101,17 @@ const CurrentSection = ({ history, location }) => {
   const [updateCount, setUpdateCount] = useState(0);
   const [redirectState, setRedirectState] = useState(null);
 
+  const circularLoader = (
+    <Grid
+      style={{ height: "100vh" }}
+      container
+      justify="center"
+      alignItems="center"
+    >
+      <CircularProgress />
+    </Grid>
+  );
+
   function handleChange(event, newValue) {
     setTabValue(newValue);
   }
@@ -169,7 +186,7 @@ const CurrentSection = ({ history, location }) => {
   // there are 4 tabs so there will be 3 indexes
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={circularLoader}>
         <Route
           exact
           path="/"

src/components/SearchResult.js

@@ -48,7 +48,7 @@ const ulVariants = {
 const SearchResult = ({ videos }) => {
   const [isOpen, setisOpen] = useCycle(false, true);
 
-  const { setCurrentVideoSnippet, setRelatedVideos } = useContext(
+  const { setCurrentVideoSnippet } = useContext(
     GlobalContext
   );
 
@@ -69,14 +69,14 @@ const SearchResult = ({ videos }) => {
   };
 
   React.useEffect(() => {
-
-    setTimeout(() => {
-      setisOpen(true);
-    }, 100);
+    setTimeout(() => {}, 100);
+    console.log("isopen cycle", isOpen);
+    setisOpen(true);
   }, []);
 
   const renderResult = videos.map(video => {
     const { snippet } = video;
+    console.log("render result times")
     return (
       <motion.div variants={liVariants} key={video.id.videoId}>
         <ListItem

src/components/sections/HomePage.js

@@ -15,11 +15,14 @@ const playlistsIds = {
   Reggaeton: "PLS_oEMUyvA728OZPmF9WPKjsGtfC75LiN"
 };
 
+let slowConnectionTimeout;
 const HomePage = () => {
   // for home playlist
   const [songObj, setSongObj] = useState({});
 
   const fetchFromApi = () => {
+    slowConnectionTimeout = setTimeout(() => {}, 5000);
+
     const getTrendingMusic = async () => {
       const res = await youtubeSearch.get("videos", {
         params: {
@@ -69,19 +72,25 @@ const HomePage = () => {
   useEffect(() => {
     const startingTime = new Date();
     const storedTime = localStorage.getItem("trackTime");
+    const savedSongs = JSON.parse(localStorage.getItem("homePageSongObj"));
+
+    if (!window.navigator.onLine) {
+      alert("You don't have internet!");
+    }
 
     const checkTimeAndFetch = () => {
       const timeElapsed = new Date() - Date.parse(storedTime); //parse the date
 
       const timeElapsedInHr = timeElapsed / (1000 * 60 * 60); //convert ms into hr
 
       // if time is more than 12 hr we will fetch from the api
-      if (timeElapsedInHr > 12) {
+
+      console.log("Saved song", savedSongs);
+      if (timeElapsedInHr > 12 || !savedSongs.latestSongs) {
         fetchFromApi();
         localStorage.setItem("trackTime", startingTime); //dont forgot to update the time
       } else {
-        const savedSongs = localStorage.getItem("homePageSongObj");
-        setSongObj(JSON.parse(savedSongs));
+        setSongObj(savedSongs);
       }
     };
 
@@ -94,14 +103,14 @@ const HomePage = () => {
     }
   }, []);
 
-// if song object changes we will push it to localstoarge
+  // if song object changes we will push it to localstoarge
   useEffect(() => {
     localStorage.setItem("homePageSongObj", JSON.stringify(songObj));
   }, [songObj]);
 
   return (
     <>
-    <br/>
+      <br />
       <SongCard songs={songObj.trending} categotyTitle={"Trending Now"} />
 
       <SongCard songs={songObj.latestSongs} categotyTitle={"Latest Music"} />

src/components/sections/SongCard.js

@@ -7,7 +7,9 @@ import {
   CardActionArea,
   CardContent,
   CardMedia,
-  Typography
+  Typography,
+  LinearProgress,
+  Container
 } from "@material-ui/core";
 
 const useStyles = makeStyles({
@@ -90,7 +92,11 @@ const MediaCard = ({ songs, categotyTitle }) => {
       </>
     );
   } else {
-    return <div>Loading</div>;
+    return (
+      <Container style={{ height: "25vh" }}>
+        <LinearProgress color="primary" />
+      </Container>
+    );
   }
 };