Avoid flickering of SystemUpdate view when update is busy

dashboard/src/components/SystemUpdate.vue

@@ -44,6 +44,7 @@ function prettyAutoUpdateSchedule(pattern) {
 const inputDialog = useTemplateRef('inputDialog');
 const updateDialog = useTemplateRef('updateDialog');
 
+const ready = ref(false);
 const taskLogsMenu = ref([]);
 const apps = ref([]);
 const version = ref('');
@@ -265,6 +266,8 @@ onMounted(async () => {
   await refreshPendingUpdateInfo();
   await refreshAutoupdatePattern();
   await refreshTasks();
+
+  ready.value = true;
 });
 
 </script>
@@ -340,7 +343,7 @@ onMounted(async () => {
       <div v-html="$t('settings.updates.description')"></div>
       <br/>
 
-      <SettingsItem>
+      <SettingsItem v-if="ready">
         <div>
           <label>{{ $t('settings.updates.schedule') }}</label>
           <span v-if="currentPattern !== 'never'">{{ prettyAutoUpdateSchedule(currentPattern) || '-' }}</span>
@@ -357,7 +360,7 @@ onMounted(async () => {
       <div class="error-label" v-if="stopError.generic">{{ stopError.generic }}</div>
       <div class="error-label" v-if="updateCheckError.generic">{{ updateCheckError.generic }}</div>
 
-      <div class="button-bar">
+      <div class="button-bar" v-if="ready">
         <Button danger v-if="updateBusy" @click="onStop()">{{ $t('settings.updates.stopUpdateAction') }}</Button>
         <Button :disabled="checkingBusy" :loading="checkingBusy" v-if="!updateBusy" @click="onCheck()">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
         <Button :danger="(pendingUpdate && pendingUpdate.unstable) ? true : undefined" :success="(pendingUpdate && !pendingUpdate.unstable) ? true : undefined" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
@@ -380,12 +383,7 @@ onMounted(async () => {
 .changelog-container {
   overflow: auto;
   max-height: 20lh;
-  margin-bottom: 10px;
   padding-right: 0.5rem; /* space so scrollbar doesn’t overlap text */
 }
 
-.skip-backup {
-  padding-top: 10px;
-}
-
 </style>