services: load all the view services together

box/cloudron service was appearing first and the rest were appearing
a while later

dashboard/src/views/ServicesView.vue

@@ -18,6 +18,15 @@ import AppsModel from '../models/AppsModel.js';
 const appsModel = AppsModel.create();
 const servicesModel = ServicesModel.create();
 const systemModel = SystemModel.create();
+const BOX_SERVICE = Object.freeze({
+  id: 'box',
+  name: 'cloudron',
+  status: 'active',
+  memoryUsed: 0,
+  memoryPercent: 0,
+  memoryLimit: 0,
+  config: {}
+});
 
 const columns = {
   status: {},
@@ -63,16 +72,7 @@ function createActionMenu(id) {
   }];
 }
 
-const services = reactive({
-  box: {
-    name: 'cloudron',
-    status: 'active',
-    memoryUsed: 0,
-    memoryUsage: '',
-    memoryLimit: 0,
-    config: {}
-  }
-});
+const services = reactive({});
 
 const servicesArray = computed(() => {
   return Object.keys(services).map(s => {
@@ -106,19 +106,29 @@ async function refresh(id) {
 }
 
 const refreshBusy = ref(false);
+const initialLoadBusy = ref(true);
 async function refreshAll() {
   refreshBusy.value = true;
 
   let [error, result] = await appsModel.list();
-  if (error) return console.error(error);
+  if (error) {
+    refreshBusy.value = false;
+    return console.error(error);
+  }
 
   apps = result;
 
   [error, result] = await servicesModel.list();
-  if (error) return console.error(error);
+  if (error) {
+    refreshBusy.value = false;
+    return console.error(error);
+  }
+
+  const allServices = result;
+  if (!services[BOX_SERVICE.id]) services[BOX_SERVICE.id] = { ...BOX_SERVICE, config: {} };
 
   // init with all services
-  for (const s of result.sort((a, b) => a.name.localeCompare(b.name))) {
+  for (const s of allServices.sort((a, b) => a.name.localeCompare(b.name))) {
     if (!services[s.id]) services[s.id] = { id: s.id, name: s.name, config: {}, status: '' };
 
     if (s.id.indexOf('redis') === 0) {
@@ -128,7 +138,8 @@ async function refreshAll() {
     }
   }
 
-  await each(result.map(s => s.id), refresh);
+  await each(allServices.map(s => s.id), refresh);
+  initialLoadBusy.value = false;
   refreshBusy.value = false;
 }
 
@@ -267,7 +278,9 @@ onUnmounted(() => {
       <div>{{ $t('services.description') }}</div>
       <br/>
 
-      <TableView :columns="columns" :model="servicesArray">
+      <ProgressBar v-if="initialLoadBusy" mode="indeterminate" :show-label="false" :slim="true" :show-track="false"/>
+
+      <TableView v-if="!initialLoadBusy" :columns="columns" :model="servicesArray">
         <template #status="{ item:service }">
           <StateLED :busy="!service.status" :state="state(service)" :title="stateTooltip(service)"/>
         </template>