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

@@ -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;
 }

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");

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) {

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,
   };
 });
 

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,