From 23eeca70e861447d2f166b4f4c6380e68e5bed0e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 13 Jun 2024 15:46:45 +0200
Subject: [PATCH] feat: show consistent initial loading spinner

This change makes sure that the loading spinner on the initial page load gets displayed consistently during the bootstrap of the client. The spinner gets hidden eventually after all apps have been announced as ready.

Also aligns the spinner design with all the other loading spinners and reduces the delay before showing it from 1 to 0.5 seconds.
---
 ...ncement-consistent-initial-loading-spinner |  8 +++++++
 index.html                                    | 22 +++++++++++++------
 packages/web-runtime/src/index.ts             |  3 ++-
 3 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-consistent-initial-loading-spinner

diff --git a/changelog/unreleased/enhancement-consistent-initial-loading-spinner b/changelog/unreleased/enhancement-consistent-initial-loading-spinner
new file mode 100644
index 00000000000..81c9f4b5b90
--- /dev/null
+++ b/changelog/unreleased/enhancement-consistent-initial-loading-spinner
@@ -0,0 +1,8 @@
+Enhancement: Consistent initial loading spinner
+
+We have updated the loading spinner on the initial page load to run continuously during the client bootstrap. Previously, the spinner would appear and disappear multiple times.
+
+Additionally, we have aligned the spinner's design with our other loading spinners and reduced the delay before it appears from 1 second to 0.5 seconds.
+
+https://github.com/owncloud/web/pull/11054
+https://github.com/owncloud/web/issues/11041
diff --git a/index.html b/index.html
index fba668c1e67..0facce64245 100644
--- a/index.html
+++ b/index.html
@@ -44,9 +44,9 @@
       }
       #loading {
         display: inline-block;
-        width: 50px;
-        height: 50px;
-        border: 2px solid #4c5f79;
+        height: 34px;
+        width: 34px;
+        border: 1px solid #4c5f79;
         border-radius: 50%;
         border-top-color: #fff;
         animation: spin 1s ease-in-out infinite;
@@ -125,7 +125,7 @@ <h2>Your browser is not supported</h2>
 
       var loaderTimer = setTimeout(function () {
         loader.classList.remove('splash-hide')
-      }, 1000);
+      }, 500);
 
       function displayError() {
         loader.classList.remove('splash-hide')
@@ -134,7 +134,7 @@ <h2>Your browser is not supported</h2>
 
       function displayBrowserError() {
         clearTimeout(loaderTimer)
-        loader.classList.add('splash-hide')
+        removeLoadingSpinner()
         browserError.classList.remove('splash-hide')
       }
 
@@ -144,14 +144,22 @@ <h2>Your browser is not supported</h2>
         init()
       }
 
+      function removeLoadingSpinner() {
+        if (!loader.classList.contains('splash-hide')) {
+          loader.classList.add('splash-hide')
+        }
+      }
+
       function init() {
         if (typeof requirejs === 'undefined') {
           displayError()
         } else {
           window.runtimeLoaded = function(runtime) {
             clearTimeout(loaderTimer)
-            document.getElementById('splash-loading').classList.add('splash-hide')
-            runtime.bootstrapApp('config.json').catch(runtime.bootstrapErrorApp)
+            runtime.bootstrapApp('config.json', removeLoadingSpinner).catch((error) => {
+              removeLoadingSpinner()
+              runtime.bootstrapErrorApp(error)
+            })
           }
         }
       }
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 72b7826e74e..563b097d1a1 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -50,7 +50,7 @@ import { ArchiverService } from '@ownclouders/web-pkg'
 import { UnifiedRoleDefinition } from '@ownclouders/web-client/graph/generated'
 import { extensionPoints } from './extensionPoints'
 
-export const bootstrapApp = async (configurationPath: string): Promise<void> => {
+export const bootstrapApp = async (configurationPath: string, appsReadyCallback: () => void) => {
   const pinia = createPinia()
   const app = createApp(pages.success)
   app.use(pinia)
@@ -168,6 +168,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
       }
       announceVersions({ capabilityStore })
       await announceApplicationsReady({ app, appsStore, applications })
+      appsReadyCallback()
     },
     {
       immediate: true