lol spinny loading circle

src/App.js

@@ -7,7 +7,6 @@ import { Grid, Box, Button } from "@mui/material";
 import YourFavoriteSpotifyArtists from "./YourFavoriteSpotifyArtists.js";
 import PickDate from "./PickDate.js";
 import ConcertList from "./ConcertList.js";
-import AuthorizeSpotify from "./AuthorizeSpotify.js";
 import SharePage from "./SharePage.js";
 import html2canvas from "html2canvas";
 import canvas2image from "@reglendo/canvas2image";
@@ -18,6 +17,7 @@ function App() {
   let cachedStartDate = localStorage.getItem("startDate");
   let cachedEndDate = localStorage.getItem("endDate");
   const [concerts, setConcerts] = useState([]);
+  const [isRequestTriggered, setIsRequestTriggered] = useState(false);
   //all concerts is used to reoptimize the whole route... based on incoming concert
   const [allConcerts, setAllConcerts] = useState([]);
   const [userLocation, setUserLocation] = useState(null);
@@ -106,6 +106,7 @@ function App() {
             setFollowedArtists={setFollowedArtists}
             startDate={startDate}
             endDate={endDate}
+            setIsRequestTriggered={setIsRequestTriggered}
           />
           <Router>
             <Routes>
@@ -126,6 +127,7 @@ function App() {
           <YourSpotifyArtistsWithShows
             artists={followedArtists}
             onChildClick={handleChildClick}
+            isRequestTriggered={isRequestTriggered}
           />
           <ConcertList
             setConcerts={setConcerts}

src/GetSpotifyPlaylistArtistsWithShows.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Grid, Stack, TextField, Button } from '@mui/material';
 
-function GetSpotifyPlaylistArtistsWithShows({followedArtists, setFollowedArtists, startDate, endDate}) {
+function GetSpotifyPlaylistArtistsWithShows({followedArtists, setFollowedArtists, startDate, endDate, setIsRequestTriggered}) {
     const [spotifyPlayList, setSpotifyPlaylist] = useState("");
     let handleSubmit = async (e) => {
         e.preventDefault();
@@ -11,7 +11,7 @@ function GetSpotifyPlaylistArtistsWithShows({followedArtists, setFollowedArtists
         const endIndex = url.indexOf("?"); // Find the index of the question mark
 
         const extractedPlaylistId = url.substring(startIndex, endIndex);
-
+        setIsRequestTriggered(true);
         await fetch(`${process.env.REACT_APP_BACKEND}/FindArtistWithShows/GetSpotifyPlaylistArtistsWithShows`, {
             method: 'POST',
             headers: {
@@ -37,6 +37,7 @@ function GetSpotifyPlaylistArtistsWithShows({followedArtists, setFollowedArtists
             console.log("Some error occured");
             console.log(err);
         });
+        setIsRequestTriggered(false);
     };
 
     return (<Grid>

src/YourSpotifyArtistsWithShows.js

@@ -1,35 +1,42 @@
-import React, {useState, useEffect} from 'react';
-import { Grid } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { Grid, CircularProgress } from '@mui/material';
 import SwipeableTextMobileStepper from './ArtistsCarrousel'
 
-function YourSpotifyArtistsWithShows({ artists, onChildClick}) {
-    const [groupedNames, setGroupedNames] = useState({});
-    useEffect(() => {
-      if (!artists) return
-      artists.sort((a, b) => a.name.localeCompare(b.name));
-      const grouped = artists.reduce((acc, artist) => {
-        const artistNameRaw = artist.name.toUpperCase();
-        const firstLetter = artistNameRaw[0];
-
-        acc[firstLetter] = acc[firstLetter] || [];
-        acc[firstLetter].push(artist);
-
-        return acc;
-      }, {});
-      console.log(grouped);
-      setGroupedNames(grouped);
-    }, [artists]);
-
-    const handleClick = (artistName) => {
-        onChildClick(artistName); 
-      };
-
-    return (
-        <Grid>
-          <p>Artists from your playlist</p>
-          {!!artists && <SwipeableTextMobileStepper groupedNames={groupedNames} handleArtistClick={handleClick} />}
-        </Grid>
-    );
+function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered }) {
+  const [groupedNames, setGroupedNames] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!artists) return
+    artists.sort((a, b) => a.name.localeCompare(b.name));
+    const grouped = artists.reduce((acc, artist) => {
+      const artistNameRaw = artist.name.toUpperCase();
+      const firstLetter = artistNameRaw[0];
+
+      acc[firstLetter] = acc[firstLetter] || [];
+      acc[firstLetter].push(artist);
+
+      return acc;
+    }, {});
+    setGroupedNames(grouped);
+  }, [artists]);
+
+  useEffect(()=>{
+    setIsLoading(isRequestTriggered);
+  }, [isRequestTriggered])
+
+
+  const handleClick = (artistName) => {
+    onChildClick(artistName);
+  };
+
+  return (
+    <Grid>
+      <p>Artists from your playlist</p>
+      {!!artists && <SwipeableTextMobileStepper groupedNames={groupedNames} handleArtistClick={handleClick} />}
+      {isLoading && <CircularProgress />}
+    </Grid>
+  );
 }