Merge pull request #11054 from owncloud/feat/constant-initial-loading…

…-spinner

feat: show consistent initial loading spinner

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