From ec9fb0bb904ab72b4598d6810adee1a274a9b0a9 Mon Sep 17 00:00:00 2001
From: tammi-23 <t.thamm@opencloud.eu>
Date: Thu, 6 Nov 2025 08:44:02 +0100
Subject: [PATCH] fix: avoid flicker on CalDAV check (#1538)

* fix: avoid flicker on CalDAV check

(cherry picked from commit 936c762f133ecc263a8ca3750ce80d07e8bb75eb)
---
 .../src/pages/account/accountCalendar.vue     | 178 +++++++++---------
 .../pages/account/accountCalendar.spec.ts     |  13 +-
 2 files changed, 103 insertions(+), 88 deletions(-)

diff --git a/packages/web-runtime/src/pages/account/accountCalendar.vue b/packages/web-runtime/src/pages/account/accountCalendar.vue
index 3d860b8e10..b8af91d2b0 100644
--- a/packages/web-runtime/src/pages/account/accountCalendar.vue
+++ b/packages/web-runtime/src/pages/account/accountCalendar.vue
@@ -1,85 +1,88 @@
 <template>
   <div id="account-calendar">
-    <h1 class="text-lg mt-1" v-text="$gettext('Calendar')" />
-    <span v-if="!isCalDavAvailable" class="flex flex-row items-center">
-      <oc-icon name="information" size="small" fill-type="line" class="mr-1" />
+    <app-loading-spinner v-if="isCalDavLoading" />
+    <template v-else>
+      <h1 class="text-lg mt-1" v-text="$gettext('Calendar')" />
+      <span v-if="!isCalDavAvailable" class="flex flex-row items-center">
+        <oc-icon name="information" size="small" fill-type="line" class="mr-1" />
 
-      <span
-        class="calendar-not-configured-message"
+        <span
+          class="calendar-not-configured-message"
+          v-text="
+            $gettext(
+              'The calendar is not yet configured on your system, in order to learn how to enable click'
+            )
+          "
+        />
+        <oc-button
+          no-hover
+          class="ml-1"
+          appearance="raw"
+          type="router-link"
+          href="https://docs.opencloud.eu/docs/admin/configuration/radicale-integration/"
+        >
+          <span v-text="$gettext('here')" />
+        </oc-button>
+      </span>
+      <p
+        class="text-sm mt-0 mb-4"
         v-text="
           $gettext(
-            'The calendar is not yet configured on your system, in order to learn how to enable click'
+            'Here, you can access your personal calendar for integration with third-party apps like Thunderbird, Apple Calendar, and others.'
           )
         "
       />
-      <oc-button
-        no-hover
-        class="ml-1"
-        appearance="raw"
-        type="router-link"
-        href="https://docs.opencloud.eu/docs/admin/configuration/radicale-integration/"
+      <account-table
+        :fields="[
+          $gettext('CalDAV information name'),
+          $gettext('CalCAV information value'),
+          $gettext('CalCAV information actions')
+        ]"
       >
-        <span v-text="$gettext('here')" />
-      </oc-button>
-    </span>
-    <p
-      class="text-sm mt-0 mb-4"
-      v-text="
-        $gettext(
-          'Here, you can access your personal calendar for integration with third-party apps like Thunderbird, Apple Calendar, and others.'
-        )
-      "
-    />
-    <account-table
-      :fields="[
-        $gettext('CalDAV information name'),
-        $gettext('CalCAV information value'),
-        $gettext('CalCAV information actions')
-      ]"
-    >
-      <oc-table-tr>
-        <oc-table-td>{{ $gettext('CalDAV URL') }}</oc-table-td>
-        <oc-table-td>
-          <span class="truncate">{{ configStore.serverUrl }}</span>
-        </oc-table-td>
-        <oc-table-td>
-          <oc-button
-            appearance="raw"
-            data-testid="copy-caldav-url"
-            size="small"
-            no-hover
-            @click="copyCalDavUrlToClipboard"
-          >
-            <oc-icon :name="copyCalDavUrlIcon" size="small" />
-            <span class="ml-0.5">{{ $gettext('Copy CalDAV URL') }}</span>
-          </oc-button>
-        </oc-table-td>
-      </oc-table-tr>
-      <oc-table-tr>
-        <oc-table-td>{{ $gettext('Username') }}</oc-table-td>
-        <oc-table-td>
-          <span>{{ user.onPremisesSamAccountName }}</span>
-        </oc-table-td>
-        <oc-table-td>
-          <oc-button
-            appearance="raw"
-            data-testid="copy-caldav-username"
-            size="small"
-            no-hover
-            @click="copyCalDavUsernameToClipboard"
-          >
-            <oc-icon :name="copyCalDavUsernameIcon" size="small" />
-            <span class="ml-0.5">{{ $gettext('Copy CalDAV username') }}</span>
-          </oc-button>
-        </oc-table-td>
-      </oc-table-tr>
-      <oc-table-tr>
-        <oc-table-td>{{ $gettext('Password') }}</oc-table-td>
-        <oc-table-td colspan="2">
-          {{ $gettext('An app token needs to be generated and then can be used.') }}
-        </oc-table-td>
-      </oc-table-tr>
-    </account-table>
+        <oc-table-tr>
+          <oc-table-td>{{ $gettext('CalDAV URL') }}</oc-table-td>
+          <oc-table-td>
+            <span class="truncate">{{ configStore.serverUrl }}</span>
+          </oc-table-td>
+          <oc-table-td>
+            <oc-button
+              appearance="raw"
+              data-testid="copy-caldav-url"
+              size="small"
+              no-hover
+              @click="copyCalDavUrlToClipboard"
+            >
+              <oc-icon :name="copyCalDavUrlIcon" size="small" />
+              <span class="ml-0.5">{{ $gettext('Copy CalDAV URL') }}</span>
+            </oc-button>
+          </oc-table-td>
+        </oc-table-tr>
+        <oc-table-tr>
+          <oc-table-td>{{ $gettext('Username') }}</oc-table-td>
+          <oc-table-td>
+            <span>{{ user.onPremisesSamAccountName }}</span>
+          </oc-table-td>
+          <oc-table-td>
+            <oc-button
+              appearance="raw"
+              data-testid="copy-caldav-username"
+              size="small"
+              no-hover
+              @click="copyCalDavUsernameToClipboard"
+            >
+              <oc-icon :name="copyCalDavUsernameIcon" size="small" />
+              <span class="ml-0.5">{{ $gettext('Copy CalDAV username') }}</span>
+            </oc-button>
+          </oc-table-td>
+        </oc-table-tr>
+        <oc-table-tr>
+          <oc-table-td>{{ $gettext('Password') }}</oc-table-td>
+          <oc-table-td colspan="2">
+            {{ $gettext('An app token needs to be generated and then can be used.') }}
+          </oc-table-td>
+        </oc-table-tr>
+      </account-table>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -87,8 +90,9 @@ import { useGettext } from 'vue3-gettext'
 import AccountTable from '../../components/Account/AccountTable.vue'
 import { useClientService, useConfigStore, useUserStore } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref, unref } from 'vue'
+import { computed, onMounted, ref, unref } from 'vue'
 import { urlJoin } from '@opencloud-eu/web-client'
+import { useTask } from 'vue-concurrency'
 
 const { $gettext } = useGettext()
 const userStore = useUserStore()
@@ -103,6 +107,10 @@ const copyIcon = 'file-copy'
 const copyCalDavUrlIcon = ref(copyIcon)
 const copyCalDavUsernameIcon = ref(copyIcon)
 
+const isCalDavLoading = computed(
+  () => unref(loadCalDavTask.isRunning) || !unref(loadCalDavTask.last)
+)
+
 const copyCalDavUrlToClipboard = () => {
   navigator.clipboard.writeText(unref(configStore.serverUrl))
   copyCalDavUrlIcon.value = copiedIcon
@@ -115,18 +123,20 @@ const copyCalDavUsernameToClipboard = () => {
   setTimeout(() => (copyCalDavUsernameIcon.value = copyIcon), 1500)
 }
 
-onMounted(async () => {
+const loadCalDavTask = useTask(function* (signal) {
   const wellKnownUrl = '.well-known/caldav'
   try {
-    const response = await clientService.httpAuthenticated.get(wellKnownUrl, {
-      method: 'OPTIONS'
-    })
-
-    if (response.request.responseURL.includes(urlJoin(configStore.serverUrl, 'caldav'))) {
-      isCalDavAvailable.value = true
-    }
-  } catch (error) {
-    console.info('CalDAV check failed:', error)
+    const response = yield clientService.httpAuthenticated.get(wellKnownUrl, { method: 'OPTIONS' })
+    isCalDavAvailable.value = response.request.responseURL.includes(
+      urlJoin(configStore.serverUrl, 'caldav')
+    )
+  } catch (e) {
+    console.error(e)
+    isCalDavAvailable.value = false
   }
 })
+
+onMounted(async () => {
+  await loadCalDavTask.perform()
+})
 </script>
diff --git a/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts b/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
index f2d2cb7895..1c21e91d4e 100644
--- a/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
@@ -33,8 +33,11 @@ describe('account calendar page', () => {
     expect(wrapper.find('.calendar-not-configured-message').exists()).toBeFalsy()
   })
 
-  it('does not render content if CalDAV is not available', () => {
-    const wrapper = getWrapper()
+  it('does not render content if CalDAV is not available', async () => {
+    const wrapper = getWrapper({ available: false })
+
+    await flushPromises()
+    await nextTick()
 
     expect(wrapper.find('.calendar-not-configured-message').exists()).toBeTruthy()
   })
@@ -55,7 +58,9 @@ describe('account calendar page', () => {
   })
 })
 
-function getWrapper() {
+function getWrapper(opts: { available?: boolean } = {}) {
+  const { available = true } = opts
+
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -80,7 +85,7 @@ function getWrapper() {
   mocks.$clientService.httpAuthenticated.get.mockResolvedValue({
     status: 301,
     request: {
-      responseURL: 'https://example.com/caldav/'
+      responseURL: available ? 'https://example.com/caldav/' : 'https://example.com/somewhere-else'
     }
   } as AxiosResponse)
   return mount(AccountCalendar, {