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.

[nbey]

I have not been able to find a solution, and I'm not sure if this issue is directly related to what @jedihacks previously resolved.

[Wholloran]

After discussion lets try a few things, let's create a sandbox project to reproduce and play with. Then reach out to the ionic team and see if they might have any ideas. Let's also Test out the stencil version pump branch and see if the issue is still present there( it might already be resolved)

[jedihacks]

Not fixed; but mitigated with this commit: cd33ee0

I believe the issue may have to do with us performing some conditional rendering. See how the header shifts slightly, as if it's being resized? I think that's our clue