Refactor layout components and add loading state

- Refactor the layout components to improve code organization and readability.
- Add a new store called LoadingStore to manage the loading state.
- Update AppLayout.vue, AppMenu.vue, AppTopbar.vue, ScenarioStore.js, and UserPrefStore.js to import and use the LoadingStore.
- Add loading indicators in AppTopbar.vue and ScenarioList.vue components.

src/stores/LoadingStore.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+
+export const LoadingStore = defineStore('loading_store', () => {
+
+
+    const scenario_loading = ref(false)
+    const user_loading = ref(false)
+    const another_loading = ref(false)
+    
+    const  isLoading = computed(() => {
+        return scenario_loading.value || user_loading.value || another_loading.value
+    })
+
+    return {isLoading, 
+            user_loading, 
+            scenario_loading, 
+            another_loading
+        }
+})

src/stores/ScenarioStore.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { ScenarioService } from '../service/ScenarioService'
+import { LoadingStore } from './LoadingStore'
 import { UserPrefStore } from './UserPrefStore'
 
 export const ScenarioStore = defineStore('scenario_store', () => {
@@ -11,24 +12,31 @@ export const ScenarioStore = defineStore('scenario_store', () => {
     const applicationScenarios = ref([])
     const filterString = ref('')
     const allScenarios = ref([])
+
     const userPrefStore  = UserPrefStore()
+    const loadingStore = LoadingStore()
 
 
     async function fetchScenarios() {
-
+        loadingStore.scenario_loading = true;
         await ScenarioService.getScenariosProject(userPrefStore.selectedProject).then(resp => {
             projectScenarios.value = resp.data;
             allScenarios.value = [...projectScenarios.value]
+            loadingStore.scenario_loading = false;
         });
+        
     }
 
 
     async function fetchApplicationScenarios() {
+        loadingStore.scenario_loading = true;
 
         await  ScenarioService.getScenariosApplication(userPrefStore.selectedApp).then(resp=>{
             console.log("response scenari", resp);
             applicationScenarios.value = resp.data
-            allScenarios.value = [...projectScenarios.value, ...applicationScenarios.value]
+            allScenarios.value = [...projectScenarios.value, ...applicationScenarios.value]            
+            loadingStore.scenario_loading = false;
+
         })
     }
 
@@ -47,5 +55,11 @@ export const ScenarioStore = defineStore('scenario_store', () => {
     })
 
 
-    return {filteredScenarios, projectScenarios, applicationScenarios, fetchScenarios,fetchApplicationScenarios,scenarios,filterString }
+    return {filteredScenarios, 
+            projectScenarios, 
+            applicationScenarios, 
+            fetchScenarios,
+            fetchApplicationScenarios,
+            scenarios,
+            filterString }
   })

src/stores/UserPrefStore.js

@@ -1,19 +1,24 @@
 import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
+import { LoadingStore } from './LoadingStore';
+
 export const UserPrefStore = defineStore('userpref_store', () => {
 
     const user = ref(null)
     const userLoaded = ref(false)
     const selectedApp = ref(null)
+    const loadingStore = LoadingStore()
+
 
     async function fetchUserData(){
       
       const auth = useAuth();
-
+      loadingStore.user_loading = true;
       await auth.fetch().then((fetchedUser) => {
           user.value = fetchedUser.data.data;
           userLoaded.value = true;
+          loadingStore.user_loading = false;
       }).catch((error) => {
           reject(error);
       });