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/layout/AppTopbar.vue

@@ -4,6 +4,7 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { useRouter } from 'vue-router';
 
 
+import { LoadingStore } from '../stores/LoadingStore.js';
 import { ScenarioStore } from '../stores/ScenarioStore.js';
 import { UserPrefStore } from '../stores/UserPrefStore.js';
 
@@ -16,6 +17,7 @@ const  router = useRouter();
 const props = defineProps(['page']);
 const userPrefStore = UserPrefStore();
 const scenario_store = ScenarioStore();
+const loadingStore = LoadingStore()
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 
@@ -54,6 +56,8 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
                 
+                <ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
+
                 <button  @click="router.push('/canvas')" class="layout-topbar-action" >
                     <i class="pi pi-file-edit"></i>
                 </button >
@@ -75,6 +79,7 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
                     <AppConfigurator />
                 </div>
             </div>
+
             <Dropdown 
                         v-model="userPrefStore.selectedApp"
                         :options="userPrefStore.availableApp"