loading animation when generating trip titles

taver-ca · Dec 8, 2024 · d7a4477 · d7a4477
1 parent e82c646
commit d7a4477
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/Odyssey/FetchName.js b/src/Odyssey/FetchName.js
@@ -9,7 +9,6 @@ export const FetchName = async (concerts) => {
             body: JSON.stringify(concerts),
         }
       );
-      console.log(`response status code: ${response.status}`);
       if (response.status === 200) {
         let resJson = await response.json();    
         return resJson;    

diff --git a/src/Odyssey/SharePage.js b/src/Odyssey/SharePage.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Stack, TextField, Button } from '@mui/material';
+import React, { useState } from 'react';
+import { Stack, TextField, Button, CircularProgress } from '@mui/material';
 import Map from "./map";
 import { useLoadScript } from "@react-google-maps/api"
 import SharePageList from './SharePageList';
 import { FetchName } from './FetchName.js';
 
 const SharePage = ({ concerts, userLocation, mapStyle, setPosterName, posterName, posterNameSuggestions, setPosterNameSuggestions }) => {
 
-
+    const [isLoading, setIsLoading] = useState(false);
     // Your component logic goes here
     const { isLoaded } = useLoadScript({
         googleMapsApiKey: process.env.REACT_APP_GCP_KEY, // Add your API key
@@ -23,17 +23,17 @@ const SharePage = ({ concerts, userLocation, mapStyle, setPosterName, posterName
             // send a request to openAI
             // attach the conerts, but strip the GPS data, that is not very useful for suggesting trip titles
             // New list with only 'title', 'artist', 'venue', 'city' and 'date' fields 
-            console.log("getting new titles");
             const newList = concerts.map(({ title, artist, location, date }) => ({ title, artist, date, venue: location.name, city: location.address }));
+            setIsLoading(true);
             // now make a request and send it to open AI
             var suggestions = await FetchName(newList);
-            if (suggestions.length >= 1)
-            {
+            if (suggestions.length >= 1) {
                 setPosterName(suggestions[0].title);
             }
             if (suggestions.length >= 2) {
                 setPosterNameSuggestions(suggestions.slice(1));
-            }            
+            }
+            setIsLoading(false);
         }
         else {
             setPosterName(posterNameSuggestions[0].title);
@@ -46,17 +46,19 @@ const SharePage = ({ concerts, userLocation, mapStyle, setPosterName, posterName
         <Stack disablePadding spacing={3}>
             {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} /> : null}
             <Stack spacing={2} direction={'row'} sx={{ width: '100%' }}>
-                <TextField
-                    variant="standard"
-                    placeholder="Write a cool name for your trip here"
-                    InputProps={{ sx: { 'input': { textAlign: 'center', color: 'white' } } }}
-                    value={posterName}
-                    onChange={(e) => setPosterName(e.target.value)}
-                    sx={{ flex: 1 }} />
+                {isLoading ? <Stack direction={"column"} sx={{ flex: 1 }} > <CircularProgress size={24} /> </Stack> :
+                    <TextField
+                        variant="standard"
+                        placeholder="Write a cool name for your trip here"
+                        InputProps={{ sx: { 'input': { textAlign: 'center', color: 'white' } } }}
+                        value={posterName}
+                        onChange={(e) => setPosterName(e.target.value)}
+                        sx={{ flex: 1 }} />}
                 <Button
                     color="primary"
                     onClick={GenerateTripTitle}
-                    disabled={concerts.length === 0}
+                    disabled={(concerts.length === 0 || isLoading)}
+                    justifyContent="flex-end"
                     variant="contained">
                     Generate
                 </Button>