Loading feedback with indeterminate circle

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
         })
     },