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.

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

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)
+            })
           }
         }
       }

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