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 @@
Your browser is not supported
var loaderTimer = setTimeout(function () {
loader.classList.remove('splash-hide')
- }, 1000);
+ }, 500);
function displayError() {
loader.classList.remove('splash-hide')
@@ -134,7 +134,7 @@ Your browser is not supported
function displayBrowserError() {
clearTimeout(loaderTimer)
- loader.classList.add('splash-hide')
+ removeLoadingSpinner()
browserError.classList.remove('splash-hide')
}
@@ -144,14 +144,22 @@ Your browser is not supported
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 => {
+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 =>
}
announceVersions({ capabilityStore })
await announceApplicationsReady({ app, appsStore, applications })
+ appsReadyCallback()
},
{
immediate: true