feat: load window state API

bridge-core · Sep 10, 2022 · 0ce193a · 0ce193a
1 parent ebb1db5
commit 0ce193a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/src/components/Windows/Layout/BaseWindow.vue b/src/components/Windows/Layout/BaseWindow.vue
@@ -60,6 +60,9 @@
 
 			<v-card-text
 				style="overflow-y: auto"
+				:class="{
+					'd-flex align-center justify-center': isLoading,
+				}"
 				:style="{
 					height: heightUnset
 						? undefined
@@ -75,7 +78,13 @@
 						: undefined,
 				}"
 			>
-				<slot name="default" />
+				<v-progress-circular
+					v-if="isLoading"
+					indeterminate
+					color="accent"
+					size="42"
+				/>
+				<slot v-else name="default" />
 			</v-card-text>
 
 			<v-card-actions
@@ -110,6 +119,7 @@ export default {
 	},
 	props: {
 		isFullscreen: Boolean,
+		isLoading: Boolean,
 		isVisible: Object | Boolean,
 		shouldRender: Object | Boolean,
 		isPersistent: Boolean,

diff --git a/src/components/Windows/Layout/SidebarWindow.vue b/src/components/Windows/Layout/SidebarWindow.vue
@@ -1,42 +1,45 @@
 <template>
-	<BaseWindow v-bind="$attrs" v-on="$listeners">
+	<BaseWindow v-bind="$attrs" :isLoading="isLoading" v-on="$listeners">
 		<template #toolbar>
 			<slot name="toolbar" v-bind:selectedTab="selected" />
 		</template>
 
 		<template #sidebar>
-			<slot
-				name="sidebar"
-				v-if="!isMobile"
-				v-bind:selectedSidebar="selected"
-			/>
-
-			<template v-for="element in sidebarItems">
-				<SidebarItem
-					v-if="element.type === 'item'"
-					:key="`${element.id}`"
-					:icon="element.icon"
-					:color="element.color"
-					:text="element.text"
-					:isSelected="selected === element.id"
-					:isDisabled="element.isDisabled"
-					:disabledText="element.disabledText"
-					:compact="isMobile"
-					@click="onSidebarChanged(element.id)"
+			<template v-if="!isLoading">
+				<slot
+					name="sidebar"
+					v-if="!isMobile"
+					v-bind:selectedSidebar="selected"
 				/>
 
-				<SidebarGroup
-					v-else
-					:key="`${element.id}.${element.isOpen}`"
-					:isOpen="element.isOpen"
-					:items="element.getItems()"
-					:text="element.text"
-					:selected="selected"
-					:compact="isMobile"
-					@toggleOpen="toggleOpenCategory(element)"
-					@click="onSidebarChanged"
-				/>
+				<template v-for="element in sidebarItems">
+					<SidebarItem
+						v-if="element.type === 'item'"
+						:key="`${element.id}`"
+						:icon="element.icon"
+						:color="element.color"
+						:text="element.text"
+						:isSelected="selected === element.id"
+						:isDisabled="element.isDisabled"
+						:disabledText="element.disabledText"
+						:compact="isMobile"
+						@click="onSidebarChanged(element.id)"
+					/>
+
+					<SidebarGroup
+						v-else
+						:key="`${element.id}.${element.isOpen}`"
+						:isOpen="element.isOpen"
+						:items="element.getItems()"
+						:text="element.text"
+						:selected="selected"
+						:compact="isMobile"
+						@toggleOpen="toggleOpenCategory(element)"
+						@click="onSidebarChanged"
+					/>
+				</template>
 			</template>
+			<v-progress-linear indeterminate v-else />
 		</template>
 
 		<template #default>
@@ -63,6 +66,7 @@ export default {
 	},
 	props: {
 		sidebarItems: Array,
+		isLoading: Boolean,
 		value: {
 			type: String,
 			default: undefined,

diff --git a/src/components/Windows/NewBaseWindow.ts b/src/components/Windows/NewBaseWindow.ts
@@ -8,6 +8,7 @@ import { Sidebar } from './Layout/Sidebar'
 
 export interface IWindowState {
 	isVisible: boolean
+	isLoading: boolean
 	shouldRender: boolean
 	actions: SimpleAction[]
 }
@@ -18,6 +19,7 @@ export abstract class NewBaseWindow<T = void> extends Signal<T> {
 	protected state: IWindowState = reactive({
 		isVisible: false,
 		shouldRender: false,
+		isLoading: true,
 		actions: [],
 	})
 	protected sidebar?: Sidebar