Fix placeholder text of various empty tables and lists

dashboard/src/components/DockerRegistries.vue

@@ -12,6 +12,7 @@ import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
 
 const dockerRegistriesModel = DockerRegistriesModel.create();
 
+const busy = ref(true);
 const registries = ref([]);
 
 const columns = {
@@ -83,7 +84,9 @@ async function refresh() {
 }
 
 onMounted(async () => {
+  busy.value = true;
   await refresh();
+  busy.value = false;
 });
 
 </script>
@@ -101,7 +104,7 @@ onMounted(async () => {
     <div v-html="$t('dockerRegistries.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></div>
     <br/>
 
-    <TableView :columns="columns" :model="registries">
+    <TableView :columns="columns" :model="registries" :busy="busy" :placeholder="$t('dockerRegistries.emptyPlaceholder')">
       <template #actions="registry">
         <div style="text-align: right;">
           <Button tool plain secondary @click.capture="onActionMenu(registry, $event)" icon="fa-solid fa-ellipsis" />

dashboard/src/views/BackupListView.vue

@@ -364,7 +364,7 @@ onMounted(async () => {
         <Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
       </template>
 
-      <TableView :columns="columns" :model="backups" :busy="busy" style="margin-top: 30px;" :placeholder="$t('backups.listing.noBackups')">
+      <TableView :columns="columns" :model="backups" :busy="busy" :placeholder="$t('backups.listing.noBackups')">
         <template #preserveSecs="backup">
           <i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
         </template>

dashboard/src/views/BackupSitesView.vue

@@ -220,7 +220,7 @@ onMounted(async () => {
 
       <div>
         <ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
-        <div v-if="!busy && sites.length === 0">{{ $t('backup.sites.emptyPlaceholder') }}</div>
+        <div v-if="!busy && sites.length === 0" class="empty-placeholder">{{ $t('backup.sites.emptyPlaceholder') }}</div>
         <div class="backup-site" v-for="site in sites" :key="site.id">
           <div style="display: flex; align-items: center;">
             <StateLED :busy="site.status.busy" :state="site.status.state"/>
@@ -249,6 +249,12 @@ onMounted(async () => {
 
 <style scoped>
 
+/* should match pankow-table-placeholder */
+.empty-placeholder {
+  text-align: center;
+  margin-top: 60px;
+}
+
 .backup-site {
   display: flex;
   border-radius: var(--pankow-border-radius);

dashboard/src/views/VolumesView.vue

@@ -349,7 +349,7 @@ onMounted(async () =>{
 
       <div v-html="$t('volumes.description')"></div>
       <br/>
-      <TableView :columns="columns" :model="volumes" :busy="busy">
+      <TableView :columns="columns" :model="volumes" :busy="busy" :placeholder="$t('volumes.emptyPlaceholder')">
         <template #target="volume">
           {{ (volume.mountType === 'mountpoint' || volume.mountType === 'filesystem') ? volume.hostPath : (volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath) + (volume.mountOptions.remoteDir || '') }}
         </template>