perf: in SSR load only top level categories, on client side load and …

…render the configured level of sub categories (#1586)

* "lazy loading" of sub categories for the main navigation only on client side
* reduce rendered main navigation code in SSR rendered HTML
* reduce categories content of the transfer state
* decrease needed transfer size per SSR page

src/app/core/store/shopping/categories/categories.effects.ts

@@ -109,7 +109,7 @@ export class CategoriesEffects {
         personalizationStatusDetermined
       ),
       switchMap(() =>
-        this.categoryService.getTopLevelCategories(this.mainNavigationMaxSubCategoriesDepth).pipe(
+        this.categoryService.getTopLevelCategories(SSR ? 0 : this.mainNavigationMaxSubCategoriesDepth).pipe(
           map(categories => loadTopLevelCategoriesSuccess({ categories })),
           mapErrorToAction(loadTopLevelCategoriesFail)
         )

src/app/shell/header/header-navigation/header-navigation.component.html

@@ -18,7 +18,7 @@
     >
       {{ category.name }}
     </a>
-    <ng-container *ngIf="0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren">
+    <ng-container *ngIf="!SSR && mainNavigationMaxSubCategoriesDepth > 0 && category.hasChildren">
       <a
         class="dropdown-toggle"
         (click)="toggleOpen(category.uniqueId)"

src/app/shell/header/header-navigation/header-navigation.component.ts

@@ -18,6 +18,9 @@ export class HeaderNavigationComponent implements OnInit {
 
   private openedCategories: string[] = [];
 
+  // make variable SSR, that is used to check if the application is running in SSR or browser context, accessible in the template
+  SSR = SSR;
+
   constructor(
     private shoppingFacade: ShoppingFacade,
     @Inject(MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH)