Don't leak UI elements if dashboard is still loading or redirecting

This commit is contained in:
Johannes Zellner
2025-03-19 11:52:34 +01:00
parent fc1c1ea690
commit d45c2eb5b6
+32 -27
View File
@@ -56,6 +56,7 @@ const VIEWS = {
const dashboardModel = DashboardModel.create();
const profileModel = ProfileModel.create();
const ready = ref(false);
const view = ref('');
const profile = ref({});
const subscription = ref({
@@ -137,6 +138,8 @@ onMounted(async () => {
// TODO need to be reactive when name or icon changes
window.document.title = result.cloudronName;
document.getElementById('favicon').href = `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`;
ready.value = true;
});
</script>
@@ -145,38 +148,40 @@ onMounted(async () => {
<div style="overflow: hidden; height: 100%;">
<Notification />
<div style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
<Transition name="pankow-animation-pop-up">
<div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
<Sidebar :profile="profile" :config="config"/>
<Sidebar :profile="profile" :config="config"/>
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
<Headerbar :subscription="subscription" :profile="profile"/>
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
<Headerbar :subscription="subscription" :profile="profile"/>
<div style="overflow: auto; flex-grow: 1;">
<AppsView v-if="view === VIEWS.APPS" />
<AppConfigureView v-else-if="view === VIEWS.APP" />
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
<BrandingView v-else-if="view === VIEWS.BRANDING" />
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<NetworkView v-else-if="view === VIEWS.NETWORK" />
<ProfileView v-else-if="view === VIEWS.PROFILE" />
<ServicesView v-else-if="view === VIEWS.SERVICES" />
<SettingsView v-else-if="view === VIEWS.SETTINGS" />
<SupportView v-else-if="view === VIEWS.SUPPORT" />
<SystemView v-else-if="view === VIEWS.SYSTEM" />
<UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
<UsersView v-else-if="view === VIEWS.USERS" />
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
<div style="overflow: auto; flex-grow: 1;">
<AppsView v-if="view === VIEWS.APPS" />
<AppConfigureView v-else-if="view === VIEWS.APP" />
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
<BrandingView v-else-if="view === VIEWS.BRANDING" />
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<NetworkView v-else-if="view === VIEWS.NETWORK" />
<ProfileView v-else-if="view === VIEWS.PROFILE" />
<ServicesView v-else-if="view === VIEWS.SERVICES" />
<SettingsView v-else-if="view === VIEWS.SETTINGS" />
<SupportView v-else-if="view === VIEWS.SUPPORT" />
<SystemView v-else-if="view === VIEWS.SYSTEM" />
<UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
<UsersView v-else-if="view === VIEWS.USERS" />
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
</div>
</div>
</div>
</div>
</Transition>
</div>
</template>