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/views/pages/ScenarioList.vue

@@ -2,10 +2,7 @@
     <div>
     <h1>Available Scenarios</h1>
     </div>
-    <div v-if="loading" class="flex justify-center">
-    <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
-    </div>
-    <div v-else>
+    <div >
         <DataView :value="scenario_store.filteredScenarios" :layout="layout" paginator :rows="8">
         <template #header>
             <div class="header-container">
@@ -74,22 +71,21 @@
 <script setup>
     import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import DataView from 'primevue/dataview';
-import ProgressSpinner from 'primevue/progressspinner';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { LoadingStore } from '../../stores/LoadingStore.js';
 import { ScenarioStore } from '../../stores/ScenarioStore.js';
 
     const router = useRouter()
     const layout = ref('grid');
     const options = ref(['list', 'grid']);
     const loading = ref(true)
+    const loadingStore = LoadingStore()
 
     const scenario_store = ScenarioStore();
 
     onMounted(() => {
-            loading.value = true;
             scenario_store.fetchScenarios();
-            loading.value = false; 
         });
 
     const executeScenario = (id) => {