Issue
I have an static web application hosted on Netlify and for the sake of SSR, I have developed it with Angular Universal.
For a better User Experience, I want to add a loading spinner before all the assets are downloaded and all the components (at least the home page) are ready to go.
The software does not have an API, so I don't think using an
interceptorto watch the request would help.
I have written an overlay component and a service to inject it to my page, but is there something I need to do in the app.server.module.ts file or not?
Solution
As lorenzochaudessolle had comment here : https://github.com/angular/universal/issues/1598#issuecomment-612630028
By display the static part and hide with loading part is finished.
index.html
<body>
<div id="loader">
<!-- Here is your code (spinner, text , etc...) -->
</div>
<app-root>
</app-root>
</body>
app.component.ts
constructor(@Inject(PLATFORM_ID) private platformId: Object, private renderer: Renderer2) { }
ngAfterViewInit(): void {
if (isPlatformBrowser(this.platformId)) {
let loader = this.renderer.selectRootElement('#loader');
if (loader.style.display != "none") loader.style.display = "none"; //hide loader
console.log("test view init")
}
}
You can check out the link above to find more detail.
Answered By - paranaaan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.