From 57008b9c94cd9a89bb3be30e8c3fec76edc59026 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 16 May 2022 09:45:54 -0700
Subject: [PATCH] Adds a loaders for left menu (#1750)

* Adds a loader

* Adds a loader and cleans up home page

* Fixes missing var
---
 assets/components/SideMenu.vue | 11 +++++++++--
 assets/main.ts                 |  3 ++-
 assets/pages/Index.vue         | 20 ++++++++++++++++++--
 assets/stores/container.ts     |  5 +++++
 assets/styles.scss             |  1 +
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 55a0dace..f978ebaa 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <p class="menu-label is-hidden-mobile">Containers</p>
-    <ul class="menu-list is-hidden-mobile">
+    <ul class="menu-list is-hidden-mobile" v-if="ready">
       <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
         <router-link :to="{ name: 'container', params: { id: item.id } }" active-class="is-active" :title="item.name">
           <div class="container is-flex is-align-items-center">
@@ -45,6 +45,9 @@
         </router-link>
       </li>
     </ul>
+    <ul class="menu-list is-hidden-mobile loading" v-else>
+      <li v-for="index in 7" class="my-4"><o-skeleton animated size="large"></o-skeleton></li>
+    </ul>
   </aside>
 </template>
 
@@ -56,7 +59,7 @@ import type { Container } from "@/types/Container";
 
 const store = useContainerStore();
 
-const { activeContainers, visibleContainers } = storeToRefs(store);
+const { activeContainers, visibleContainers, ready } = storeToRefs(store);
 
 const activeContainersById = computed(() =>
   activeContainers.value.reduce((acc, item) => {
@@ -78,6 +81,10 @@ aside {
   }
 }
 
+.loading {
+  opacity: 0.5;
+}
+
 li.exited a {
   color: #777;
 }
diff --git a/assets/main.ts b/assets/main.ts
index 818585ba..6d0d2dfc 100644
--- a/assets/main.ts
+++ b/assets/main.ts
@@ -1,7 +1,7 @@
 import "./styles.scss";
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
-import { Autocomplete, Button, Dropdown, Switch, Radio, Field, Tooltip, Modal, Config } from "@oruga-ui/oruga-next";
+import { Autocomplete, Button, Dropdown, Switch, Radio, Skeleton,  Field, Tooltip, Modal, Config } from "@oruga-ui/oruga-next";
 import { bulmaConfig } from "@oruga-ui/theme-bulma";
 import { createPinia } from "pinia";
 import config from "./stores/config";
@@ -63,5 +63,6 @@ createApp(App)
   .use(Modal)
   .use(Radio)
   .use(Field)
+  .use(Skeleton)
   .use(Config, bulmaConfig)
   .mount("#app");
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
index e4c64169..8549c3a2 100644
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -98,6 +98,7 @@ import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime.vue";
 import config from "@/stores/config";
+import { useIntervalFn } from "@vueuse/core";
 
 const { base, version, secured } = config;
 const containerStore = useContainerStore();
@@ -123,8 +124,23 @@ const results = computed(() => {
 
 const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
 const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
-const totalCpu = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0));
-const totalMem = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0));
+const totalCpu = ref(0);
+useIntervalFn(
+  () => {
+    totalCpu.value = runningContainers.value.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
+const totalMem = ref(0);
+
+useIntervalFn(
+  () => {
+    totalMem.value = runningContainers.value.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
 
 function onEnter() {
   if (results.value.length == 1) {
diff --git a/assets/stores/container.ts b/assets/stores/container.ts
index fad8fad0..922ffd89 100644
--- a/assets/stores/container.ts
+++ b/assets/stores/container.ts
@@ -4,6 +4,7 @@ import { ref, Ref, computed } from "vue";
 import { showAllContainers } from "@/composables/settings";
 import config from "@/stores/config";
 import type { Container, ContainerStat } from "@/types/Container";
+import { watchOnce } from "@vueuse/core";
 
 export const useContainerStore = defineStore("container", () => {
   const containers = ref<Container[]>([]);
@@ -57,6 +58,9 @@ export const useContainerStore = defineStore("container", () => {
   const removeActiveContainer = ({ id }: Container) =>
     activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
 
+  const ready = ref(false);
+  watchOnce(containers, () => (ready.value = true));
+
   return {
     containers,
     activeContainerIds,
@@ -66,6 +70,7 @@ export const useContainerStore = defineStore("container", () => {
     currentContainer,
     appendActiveContainer,
     removeActiveContainer,
+    ready,
   };
 });
 
diff --git a/assets/styles.scss b/assets/styles.scss
index 9a84970f..123cb421 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -35,6 +35,7 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
 @import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/tooltip.scss";
 @import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
 @import "splitpanes/dist/splitpanes.css";
 
 html,