bug(global - navigation): page flickers on-load when navigating between pages

[Wholloran]

The page will flicker when navigating between tabs(Home, About, Services, and Contact). This seems to be present on all browsers.

[jedihacks]

Fixed this in branch https://github.com/openforge/main-website/commits/website-server-enhancements

However; with the fix (and using proper Stencil routing) we expose some other problems that @mmalcorn mentioned.

One of them is that with this fix we see that from the Home or About page to the Contact or Opportunities page; the header goes away.

I identified the issue here; it's related to the CSS naming convention and this code

  let element;
    try {
      element = document.querySelector('header.hero');
    } catch (e) {
      console.log('completed app-hero undefined', e);
    }
    console.log(
      'Element = ',
      element,
      ' with background ',
      `url('${this.backgroundUrl}')`
    );
    element.style.backgroundImage = `url('${this.backgroundUrl}')`;

If you inspect it when going to the page directly; you'll see that it's injecting the CSS into the wrong element.

Will fix this tomorrow with @LizCottrell or @PaulPaulDevelops

[PaulPaulDevelops]

Looking into this! Will commit to website-server-enhancements

[Wholloran]

The flicker is still present for the first time you switch between each Tab while serving, however using the Heroku URL The flicker is still constantly there.