MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

[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

This commit is contained in:
Konstantina Galouni 2024-09-10 02:50:36 +03:00
parent 0879a339ff
commit 97d038b729
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
explore/src/app/app.component.ts
View File

@ -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"

3
explore/src/app/app.module.ts
View File

@ -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,

23
explore/src/app/home/home.component.ts
View File

@ -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',
@ -109,15 +110,20 @@ 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) {
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);
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);
// }
}
}
},