[develop-hydration 0aacac2d] [develop-hydration | WIP | CHANGED] Added checks and logs for server or client state, to utilize non destructive hydration and avoid first page load flickering (affected files so far: app.component.ts, app.module.ts, home.component.ts

explore/src/app/app.component.ts

@@ -30,6 +30,7 @@ import {ISVocabulariesService} from "./openaireLibrary/utils/staticAutoComplete/
             [onlyTop]=false [user]="user"
             [communityId]="properties.adminToolsCommunity" [userMenuItems]=userMenuItems [menuItems]=menuItems></navbar>
     <div *ngIf="loading">
+      loading... {{isClient ? "client" : "server"}}
         <loading [full]="true"></loading>
     </div>
     <schema2jsonld *ngIf="properties" [URL]="properties.domain+properties.baseLink"

explore/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import {APP_ID, NgModule} from '@angular/core';
 import {SharedModule} from './openaireLibrary/shared/shared.module';
-import {BrowserModule} from '@angular/platform-browser';
+import {BrowserModule, provideClientHydration} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {CommonModule} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
@@ -38,6 +38,7 @@ import {LoadingModule} from "./openaireLibrary/utils/loading/loading.module";
   declarations: [AppComponent],
   exports: [AppComponent],
   providers: [
+    provideClientHydration(),
     {provide: APP_ID, useValue: 'explore'},
     // {
     //   provide: HTTP_INTERCEPTORS,

explore/src/app/home/home.component.ts

@@ -2,10 +2,10 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef,
+  ElementRef, Inject, makeStateKey,
   OnDestroy,
-  OnInit,
-  QueryList,
+  OnInit, PLATFORM_ID,
+  QueryList, TransferState,
   ViewChild,
   ViewChildren
 } from '@angular/core';
@@ -25,6 +25,7 @@ import {properties} from "../../environments/environment";
 import {Numbers, NumbersComponent} from "../openaireLibrary/sharedComponents/numbers/numbers.component";
 import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
+import {isPlatformServer} from "@angular/common";
 
 @Component({
   selector: 'home',
@@ -110,14 +111,19 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   stringUtils = new StringUtils();
   // disableSelect: boolean = true;
 
+  public isClient: boolean = false;
+
   constructor(
     private _router: Router,
     private _piwikService: PiwikService,
     private config: ConfigurationService, private _meta: Meta, private _title: Title, private seoService: SEOService,
     private helper: HelperService,
     private cdr: ChangeDetectorRef,
-		private quickContactService: QuickContactService
+		private quickContactService: QuickContactService,
+    @Inject(PLATFORM_ID) private platform: any,
+    private transferState: TransferState
   ) {
+    this.isClient = !isPlatformServer(this.platform);
     let description = "OpenAIRE Explore: Over 100M of research deduplicated, 170K research software, 11M research data. One of the largest open scholarly records collection worldwide.";
     let title = "OpenAIRE | Find and Share research";
     this._title.setTitle(title);
@@ -221,7 +227,12 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
               this.resultTypes.values.push({name: this.openaireEntities.OTHER, id: "other", selected: false, number: 0});
             }
 						if(this.numbersComponent) {
+              let stateKey = makeStateKey<Numbers>("numbers");
+              // if(this.isClient && this.transferState.hasKey(stateKey)) {
+              //   this.numbers = this.transferState.get(stateKey, null);
+              // } else {
                 this.numbersComponent.init(this.numbersComponent.showDatasets, this.numbersComponent.showSoftware, this.numbersComponent.showPublications, this.numbersComponent.showDatasets, this.numbersComponent.showSoftware, this.numbersComponent.showOrp, this.numbersComponent.showProjects, this.numbersComponent.showDataProviders, this.numbersComponent.showOrganizations);
+              // }
 						}
           }
         },