Component flickering when SSR and CMS Components lazy loading is enabled

[Frezzu]

I found a bug related to SSR and lazy loading of CMS Components.

The bug looks like flickering of CMS components which is loaded via importing standalone component. When I import the same component via featureModules lazy loading it does not flicker.

I suppose the flickering is happening because SSR renders lazy component on the backend and later on the browser it is recreated but there is a time when the slot is cleared and import of lazy component is just scheduled so it didn't fetched yet. The featureModules resolves modules and cms components a lot earlier, I think at guard lvl.

 LoginLogoutComponent: {
      component: () =>
        import('@app/shared/features/auth/components/login-logout/login-logout.component').then(
          (m) => m.LoginLogoutComponent,
        ),
    },

vs

// config
featureModules: {
  LoginLogoutModule: {
    cmsComponents: ['LoginLogoutComponent'],
      module: () =>
      import('@app/shared/features/auth/components/login-logout/login-logout.module').then(
        (m) => m.LoginLogoutModule,
      ),
  },
},

// other file
@NgModule({
  imports: [LoginLogoutComponent],
  providers: [
    provideConfig({
      cmsComponents: {
        LoginLogoutComponent: {
          component: LoginLogoutComponent,
        },
      },
    }),
  ],
})
export class LoginLogoutModule {}

[Frezzu]

Temporary fix:

import { Injectable } from '@angular/core';
import { CmsComponentMapping } from '@spartacus/core';
import { CmsComponentsService } from '@spartacus/storefront';
import { defer, forkJoin, from, Observable, of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';

type Component = unknown; // Just to make code more readable

/**
 * Service to handle loading of CMS components.
 *
 * Service overrides default implementation to fix loading of lazy CMS components, which are flickering when SSR is enabled.
 * See issue https://github.com/SAP/spartacus/issues/20431
 */
@Injectable()
export class CustomCmsComponentsService extends CmsComponentsService {
  private loadedLazyComponents = new Map<string, Component>();

  override determineMappings(componentTypes: string[]): Observable<string[]> {
    return super.determineMappings(componentTypes).pipe(
      switchMap((componentTypes: string[]) =>
        defer(() => {
          const lazyComponentImports: Observable<Component>[] = [];

          for (const componentType of componentTypes) {
            if (this.loadedLazyComponents.has(componentType)) {
              continue; // Skip already loaded components
            }

            const componentOrFactory = this.staticCmsConfig?.[componentType]?.component;

            if (typeof componentOrFactory === 'function' && componentOrFactory.length === 0) {
              const factory = componentOrFactory();

              if (factory instanceof Promise) {
                const componentImport$ = from(factory).pipe(
                  tap((component) => this.loadedLazyComponents.set(componentType, component)),
                );

                lazyComponentImports.push(componentImport$);
              }
            }
          }

          if (lazyComponentImports.length > 0) {
            return forkJoin(lazyComponentImports).pipe(switchMap(() => of(componentTypes)));
          }

          return of(componentTypes);
        }),
      ),
    );
  }

  override getMapping(componentType: string): CmsComponentMapping {
    const mapping = super.getMapping(componentType);

    if (this.loadedLazyComponents.has(componentType)) {
      mapping.component = this.loadedLazyComponents.get(componentType);
    }

    return mapping;
  }
}