Allow customizing loading indicator for the first page load

[vlukashov]

When adding a splash screen to a V15+ app I want to keep the splash screen visible until the first view is completely loaded. In case if the first view is a server-side view I want to

• either have an event telling me when the first view is done loading (so that I can hide my splash screen then)
• or have an API to customize the first show of the loading indicator (so that I can hide my splash screen from the index.html template and replace it with the Flow loading indicator for the first view load).

Right now this can be done using internal API, which is unsupported can be changed without any prior warning:

index.ts:

// WARNING: accessing internal Flow APIs
// This may break on any Flow version upgrade without any prior notice
const original = (window as any).Vaadin.Flow.loading;
(window as any).Vaadin.Flow.loading = (action: boolean) => {
  // When this is called first time (action = true), do nothing.
  // That's when Flow starts loading and the splash screen is still visible.
  // There is no need to show the Flow loading indicator at that time.

  // When this is called second time (action = false), hide the splash screen
  // and restore the default behavior.
  // Next time Flow starts loading something the default loading indicator will
  // be visible.
  if (!action) {
    document.querySelector('#splash-screen')!.classList.add('loaded');
    (window as any).Vaadin.Flow.loading = original;
  }
};

source: https://vaadin.com/forum/thread/18285600/how-to-implement-initial-page-loading-animation-like-on-vaadin-com

[fschon]

+1