Loading feedback with indeterminate circle

software/backend/server.ts

@@ -29,9 +29,9 @@ const path = require('path')
 app.use('/static', express.static(path.join(__dirname, 'images')))
 
 // Add delay for more realistic response times
-// app.use((req, res, next) => {
-//   setTimeout(next, Math.floor((Math.random () * 4000) + 100))
-// })
+app.use((req, res, next) => {
+  setTimeout(next, Math.floor((Math.random () * 4000) + 100))
+})
 
 // Routes
 app.use("/api", api)

software/src/data/stores/feedbackStore.ts

@@ -9,6 +9,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
     title: ref(""),
     color: ref(""),
     icon: ref(""),
+    fetchDataFromServerInProgress: ref(false),
     $i18n: {}
   }),
 

software/src/data/stores/shoppingStore.ts

@@ -6,24 +6,29 @@ import { fetchAllCities } from "../api/cityApi";
 import { CityModel } from "../models/locations/cityModel";
 import { GenreModel } from "../models/acts/genreModel";
 import { fetchAllGenres } from "../api/genreApi";
+import { useFeedbackStore } from "./feedbackStore";
 
 export const useShoppingStore = defineStore("shoppingStore", {
   state: () => ({
-    events: ref<Array<EventModel>>([ new EventModel() ]),
-    cities: ref<Array<CityModel>>([ new CityModel() ]),
-    genres: ref<Array<GenreModel>>([ new GenreModel() ]),
+    events: ref<Array<EventModel>>([]),
+    cities: ref<Array<CityModel>>([]),
+    genres: ref<Array<GenreModel>>([]),
     cityFilterName: ref<String>(),
     genreFilterName: ref<String>()
   }),
 
   actions: {
     async getEvents() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
       await fetchEvents(
         this.cityFilterName != null ? this.cityFilterName : "",
         this.genreFilterName != null ? this.genreFilterName : ""
       )
         .then(result => {
           this.events = result.data
+          feedbackStore.fetchDataFromServerInProgress = false
         })
     },
 

software/src/pages/events/eventsPage/index.vue

@@ -4,9 +4,11 @@ import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScrip
 import filterBar from './filterBar.vue';
 import { useRouter } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
 
 const router = useRouter()
 const shoppingStore = useShoppingStore()
+const feedbackStore = useFeedbackStore()
 
 shoppingStore.getEvents()
 </script>
@@ -23,8 +25,14 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
+        <v-row v-if="feedbackStore.fetchDataFromServerInProgress">
+          <v-col class="text-center">
+            <v-progress-circular indeterminate :size="128" :width="12" color="primary" />
+          </v-col>
+        </v-row>
+
         <v-row
-          v-if="shoppingStore.events.length > 0"
+          v-else-if="shoppingStore.events.length > 0"
           v-for="event of shoppingStore.events"
         >
           <v-col>