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