fix: Wait for colors to be loaded before generating preview image (#416)

vimcolorschemes · Oct 30, 2021 · e388cef · e388cef
1 parent de96158
commit e388cef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/components/preview/index.tsx b/src/components/preview/index.tsx
@@ -19,6 +19,8 @@ function Preview({ vimColorSchemes, className }: Props) {
   const defaultVimColorScheme = vimColorSchemes[0];
   const [index, setIndex] = useState<number>(0);
 
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
   const [background, setBackground] = useState<Background>(
     defaultVimColorScheme.defaultBackground,
   );
@@ -47,6 +49,8 @@ function Preview({ vimColorSchemes, className }: Props) {
     groups.forEach(group => {
       preview.current?.style.setProperty(`--vim-${group.name}`, group.hexCode);
     });
+
+    setIsLoading(false);
   }, [background, vimColorScheme, preview]);
 
   function changeVimColorScheme() {
@@ -81,6 +85,7 @@ function Preview({ vimColorSchemes, className }: Props) {
       className={classnames('preview', className, {
         'preview--light': background === Background.Light,
         'preview--dark': background === Background.Dark,
+        'preview--loaded': !isLoading,
       })}
       ref={preview}
     >

diff --git a/src/gatsby/preview.ts b/src/gatsby/preview.ts
@@ -53,6 +53,8 @@ async function generatePreviewImages(
       fs.mkdirSync(previewDirectory, { recursive: true });
     }
 
+    await page.waitForSelector('.preview.preview--loaded');
+
     await page.screenshot({
       path: previewPath,
       clip: {
@@ -63,7 +65,7 @@ async function generatePreviewImages(
       },
     });
 
-    await page.close()
+    await page.close();
   }
 
   await browser.close();