Page loading skeleton - Spartacus

user_10460583 0
Viewed 186

We would like to implement the page loading skeleton in our Spartacus project, however we have faced some issues. One every page load, the first two requests ('/basesites' and '/pages') are fired automatically by AuthModule.forRoot() before any code is run through storefront not allowing us to know if user is on the page and if the skeleton must be displayed until those requests are complete.

Does anyone have any experience of implementing loading skeleton in Spartacus and faced a similar issue when endpoints are called automatically before cx-storefront is run?

spartacus-storefront angular
1 Answers

Sketelon UI before Angular app is bootstrapped

You can add your generic skeleton HTML inside the root component in the index.html file, for example:

...

<body>
  <app-root>...My generic skeleton HTML here...</app-root>
</body>

Angular will replace the content of this element, after the Angular's application is bootstraped (rendered dynamicaly for the first time).

Btw. Angular SSR works similarly - Angular replaces all the server-side-rendered HTML that was placed inside the root element, after Angular bootstraps the app dynamically in the browser.

Why Spartacus calls for /basesites and /pages are blocking the bootstrap of Angular app

First, let's clarify: those calls are not triggered by the AuthModule.forRoot().

Both calls /basesites and /pages happen before Angular bootstraps the app.

  • /basesites call is made during the Angular's APP_INITIAIZER(s) phase. By design, Angular app is not bootstrapped until all APP_INITIALIZER(s) resolve.

    The reason Spartacus fetches the CMS-driven config in this phase is that the rest of the app (services and components) depend on this dynamically loaded config.

  • /pages call is made during the Angular Routing Guards phase. And because Spartacus by default uses the Angular RouterModule with option initialNavigation: 'enabledBlocking' (alias: 'enabled'), Angular app is not bootstrapped until the first Routing Guards phase is resolved.

    The reason Spartacus uses the Angular Router's option initialNavigation: 'enabledBlocking' is to mitigate the UI flickering when CSR (client side rendering) kicks in after displaying the SSR (server side rendered) HTML.

user_117346920
Related