From 09081c61ac4b9a6d676e8eed2c28b13e241ed576 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 20 Oct 2023 15:26:57 -0400 Subject: [PATCH 1/3] chore(docs-framework): add class on example load --- .../components/example/example.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index d8cd358f35..db2fb0414f 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -96,6 +96,20 @@ export const Example = ({ // absolute url to hosted file sourceLink = '' }) => { + React.useEffect(() => { + //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded + const isDevMode = process.env.NODE_ENV === 'development'; + if (isDevMode && !document.body.classList.contains('page-loaded')) { + document.body.classList.add('page-loaded'); + } + + return () => { + if (isDevMode) { + document.body.classList.remove('page-loaded'); + } + } + }, []); + if (isFullscreenPreview) { isFullscreen = false; } From 1f55a1505193d09070fa0cc3948690bfcf56d6ba Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 20 Oct 2023 17:01:26 -0400 Subject: [PATCH 2/3] chore(example): remove dev mode check from page loaded class addition --- .../documentation-framework/components/example/example.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index db2fb0414f..708fb6e399 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -98,15 +98,12 @@ export const Example = ({ }) => { React.useEffect(() => { //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded - const isDevMode = process.env.NODE_ENV === 'development'; - if (isDevMode && !document.body.classList.contains('page-loaded')) { + if (!document.body.classList.contains('page-loaded')) { document.body.classList.add('page-loaded'); } return () => { - if (isDevMode) { - document.body.classList.remove('page-loaded'); - } + document.body.classList.remove('page-loaded'); } }, []); From b766e7b41c816f87e109b0d77dc678490a98da6a Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 25 Oct 2023 14:51:48 -0400 Subject: [PATCH 3/3] chore(example): refactor to add class on page load event --- .../components/example/example.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 708fb6e399..7ca98d7ada 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -96,19 +96,12 @@ export const Example = ({ // absolute url to hosted file sourceLink = '' }) => { - React.useEffect(() => { - //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded - if (!document.body.classList.contains('page-loaded')) { - document.body.classList.add('page-loaded'); - } - - return () => { - document.body.classList.remove('page-loaded'); - } - }, []); - if (isFullscreenPreview) { isFullscreen = false; + 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'); + }); } if (!lang) { // Inline code