From 4271f42685ef8133e507e591204320f0e064fea9 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 26 Jun 2025 19:54:08 +0200
Subject: [PATCH] Use offline indicator which does not tear out the current UI

---
 dashboard/src/Index.vue                     |  9 +++------
 dashboard/src/components/OfflineOverlay.vue | 14 +++-----------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 1ee49ca18..00fc0ba0a 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -72,7 +72,6 @@ function onOnline() {
 fetcher.globalOptions.errorHook = (error) => {
   // network error, request killed by browser
   if (error instanceof TypeError) {
-    ready.value = false;
     return offlineOverlay.value.open();
   }
 
@@ -81,10 +80,8 @@ fetcher.globalOptions.errorHook = (error) => {
 
   if (error.status === 500 || error.status === 501) {
     // actual internal server error, most likely a bug or timeout log to console only to not alert the user
-    if (!ready.value) {
-      console.error(error);
-      console.log('------\nCloudron Internal Error\n\nIf you see this, please send a mail with above log to support@cloudron.io\n------\n');
-    }
+    console.error(error);
+    console.log('------\nCloudron Internal Error\n\nIf you see this, please send a mail with above log to support@cloudron.io\n------\n');
   }
 
   if (error.status >= 502) {
@@ -241,7 +238,7 @@ onMounted(async () => {
 <template>
   <div style="overflow: hidden; height: 100%;">
     <Notification />
-    <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
+    <OfflineOverlay ref="offlineOverlay" @online="onOnline()" :href="'https://docs.cloudron.io/troubleshooting/'" :label="$t('main.offline')" />
     <SubscriptionRequiredDialog ref="subscriptionRequiredDialog"/>
 
     <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
diff --git a/dashboard/src/components/OfflineOverlay.vue b/dashboard/src/components/OfflineOverlay.vue
index 258c124df..5f75b8fb7 100644
--- a/dashboard/src/components/OfflineOverlay.vue
+++ b/dashboard/src/components/OfflineOverlay.vue
@@ -1,12 +1,11 @@
 <script setup>
 
-import { useTemplateRef, ref } from 'vue';
-import { fetcher, Spinner, Dialog } from 'pankow';
+import { ref } from 'vue';
+import { fetcher, OfflineBanner } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
 
 const emits = defineEmits(['online']);
 
-const dialog = useTemplateRef('dialog');
 const isOpen = ref(false);
 
 async function waitForOnline() {
@@ -22,7 +21,6 @@ async function waitForOnline() {
 
   // back online
   emits('online');
-  dialog.value.close();
   isOpen.value = false;
 }
 
@@ -32,7 +30,6 @@ defineExpose({
 
     isOpen.value = true;
 
-    dialog.value.open();
     waitForOnline();
   }
 });
@@ -40,10 +37,5 @@ defineExpose({
 </script>
 
 <template>
- <Dialog ref="dialog" :modal="true">
-  <div style="display: flex; flex-direction: column; align-items: center;">
-    <Spinner class="pankow-spinner-large" style="margin: 20px"/>
-    <a href="https://docs.cloudron.io/troubleshooting/" target="_blank">{{ $t('main.offline') }}</a>
-  </div>
- </Dialog>
+  <OfflineBanner :active="isOpen"/>
 </template>