Angular - Dynamic header

Question

I have a website currently under development.

Issue: When accessing a page, the front page is briefly displayed - and then the current page is shown.

Please try refreshing this link to have better understanding. Notice that while loading, the front page is displayed - and after load completes, then the correct page is displayed.

Question What shall I do to avoid the front page being shown during refresh of a page?

Background: Every page in the website have different header. My approach:

Created header helper service
Header helper service keep watching for route change
Depending on current route it sets different css class on header component template. This works perfect if user navigates through website without refreshing page
Please see html and header helper service code below

<div [ngClass]="{'no-hero': headerType === 400, 'restaurant-page': headerType === 200, 'restaurant-list': headerType === 300}"
    class="top-section">
  <div class="top-section-bg">
  </div>
 // Code removed for brevity
</div>

private setHeaderType(): void {
  if (this.currentUrl.includes("search-restaurants")) {
    this.headerType = HeaderType.restaurantSearch;
  } else if (this.currentUrl.includes("profile") || this.currentUrl.includes('faqs') || this.currentUrl.includes('bookings')) {
    this.headerType = HeaderType.noHero;
  } else if (this.currentUrl === "/") {
    this.headerType = HeaderType.home;
  } else {
    this.headerType = HeaderType.restaurantDetail;
  }
  this.headerTypeSource.next(this.headerType);
}

score 0 · Answer 1 · answered Sep 07 '18 at 21:07

My solution here is to have some styles in the index.html as plaintext, hardcoded styles, that hide the front page on reload. Aka.

index.html

<html>
    <style>
    .loading-overlay {
        z-index: 99;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        color: red;
    }

    .loading-overlay--hide { display: none; }
    </style>

    <div class="loading-overlay"></div>
</html>

And when angular boots, I just do this to hide the loader

document.getElementById('full-page-loader').className += " full-page-loader--hide";

Angular - Dynamic header

1 Answers1