From 94d54106d504d822430be6e8883b30dda464f05e Mon Sep 17 00:00:00 2001
From: Daniel Lando <daniel.sorridi@gmail.com>
Date: Fri, 31 May 2024 10:02:09 +0200
Subject: [PATCH] feat(ui): add skeleton loaders while initing

Fixes #3733
---
 src/App.vue        | 34 +++++++++++++++++++++++++++++++++-
 src/stores/base.js |  3 +++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 8a214743d1b..9eb7f1298d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -271,12 +271,21 @@
 		<main style="height: 100%">
 			<v-main style="height: 100%">
 				<router-view
-					v-if="auth !== undefined"
+					v-if="auth !== undefined && inited"
 					@import="importFile"
 					@export="exportConfiguration"
 					@showConfirm="confirm"
 					:socket="socket"
 				/>
+				<v-container v-else-if="auth !== undefined && !inited">
+					<!-- put some skeleton loaders while loading settings -->
+					<v-skeleton-loader
+						v-for="(s, i) in skeletons"
+						:key="`skeleton-${i}`"
+						:type="s"
+						:loading="true"
+					></v-skeleton-loader>
+				</v-container>
 				<v-row
 					style="height: 100%"
 					align="center"
@@ -455,11 +464,34 @@ export default {
 			'zniffer',
 			'zwave',
 			'znifferState',
+			'inited',
 		]),
 		...mapState(useBaseStore, {
 			darkMode: (store) => store.ui.darkMode,
 			navTabs: (store) => store.ui.navTabs,
 		}),
+		skeletons() {
+			// return the skeletons array based on actual route
+			const route = this.$route.path
+
+			switch (route) {
+				case Routes.controlPanel:
+					return ['actions', 'table']
+				case Routes.settings:
+					return ['list-item-two-line@10']
+				case Routes.store:
+					return ['list-item-two-line@10', 'divider']
+				case Routes.mesh:
+					return ['list-item-two-line, image']
+				case Routes.zniffer:
+				case Routes.debug:
+				case Routes.scenes:
+				case Routes.smartStart:
+					return ['table']
+				default:
+					return ['']
+			}
+		},
 		pages() {
 			const pages = [
 				{ icon: 'settings', title: 'Settings', path: Routes.settings },
diff --git a/src/stores/base.js b/src/stores/base.js
index 954a59ef0a7..c6bbea8747b 100644
--- a/src/stores/base.js
+++ b/src/stores/base.js
@@ -10,6 +10,7 @@ const log = logger.get('Store:Base')
 
 const useBaseStore = defineStore('base', {
 	state: () => ({
+		inited: false,
 		auth: undefined,
 		controllerId: undefined,
 		serial_ports: [],
@@ -556,6 +557,8 @@ const useBaseStore = defineStore('base', {
 				this.initPorts(data.serial_ports)
 				this.initScales(data.scales)
 				this.initDevices(data.devices)
+
+				this.inited = true
 			}
 		},
 		setDarkMode(value) {