patternfly-org icon indicating copy to clipboard operation
patternfly-org copied to clipboard

[Documentation framework] - "page loaded" class doesn't always fire

Open mcoker opened this issue 1 year ago • 0 comments

We added a .page-loaded class when all of the page assets have loaded as part of https://github.com/patternfly/patternfly-org/pull/3789

Looks like the class isn't always being added to the page. According to @evwilkin

well i can’t exactly say why it happens in incognito and not elsewhere, but i believe the TLDR is the window.load event listening is being added to the page after it’s already loaded. The listener is always there, but only triggers a “load” outside of Chrome incognito hard to google what causes that and why it’s working in Chromium but not Chrome for me, but luckily I think there’s an easy fix - before we add the event listener we check document.readyState - if it’s “complete” we go ahead and add the class, if not we add the listener as we do now

And Evan said this was working for him

if (isFullscreenPreview) {
    isFullscreen = false;
    if (document?.readyState === 'complete') {
      document.body.classList.add('page-loaded');
    } else {
      window.addEventListener('load', () => {
        //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded
        document.body.classList.add('page-loaded');
      });
    }
  }

Once that is working, we'll want to add that to the core repo's backstop config as the readySelector, outlined in https://github.com/patternfly/patternfly/issues/6602

mcoker avatar May 07 '24 23:05 mcoker