fix: perf enhancements

.eslintrc

@@ -4,7 +4,9 @@
   "rules": {
     "react/prop-types": 0,
     "react/forbid-prop-types": 0,
-    "arrow-body-style": 0
+    "arrow-body-style": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   },
   "globals": {
     "fathom": "readonly"

plugins/gatsby-theme-carbon-svgs/components/shared/ActionBar.js

@@ -1,10 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import ReactDOMServer from 'react-dom/server';
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext, useState } from 'react';
 import { pascalCase } from 'change-case';
 import { Code16, Download16 } from '@carbon/icons-react';
 import { TooltipDefinition } from 'carbon-components-react';
 import copy from 'copy-to-clipboard';
+import cx from 'classnames';
 import { LibraryContext } from './LibraryProvider';
 import styles from './ActionBar.module.scss';
 
@@ -43,23 +44,20 @@ const ActionBar = ({
 
   const handleCopy = () => {
     setCopyText('Copied!');
+    setTimeout(() => {
+      setCopyText(`Copy ${component}`);
+    }, 2000);
     copy(component);
   };
 
-  useEffect(() => {
-    if (copyText === 'Copied!') {
-      setTimeout(() => {
-        setCopyText(`Copy ${component}`);
-      }, 2000);
-    }
-  }, [copyText]);
-
   return (
     <div
       ref={actionBarRef}
       onBlur={handleBlurEvent}
-      hidden={!isActionBarVisible}
-      className={styles.container}>
+      aria-hidden={!isActionBarVisible}
+      className={cx(styles.container, {
+        [styles.hidden]: !isActionBarVisible,
+      })}>
       <TooltipDefinition
         onFocus={() => setIsActionBarVisible(true)}
         onClick={handleDownload}

plugins/gatsby-theme-carbon-svgs/components/shared/ActionBar.module.scss

@@ -4,14 +4,14 @@
   bottom: 0;
   right: 0;
   opacity: 1;
-  transition: opacity $duration--fast-02;
+  transition: opacity $duration--fast-01 motion(standard, productive);
   z-index: 1;
   svg {
     fill: $icon-01;
   }
 }
 
-.container[hidden] {
+.container.hidden {
   opacity: 0;
 }
 

plugins/gatsby-theme-carbon-svgs/components/shared/SvgCard.js

@@ -26,23 +26,25 @@ const SvgCard = ({ icon, containerIsVisible, ...rest }) => {
       <div className={svgCardInside}>
         <span className={triggerText}>{friendlyName}</span>
         {containerIsVisible && (
-          <div className={flexContainer}>
-            {Component ? (
-              <Component {...rest}>
-                <title>{friendlyName}</title>
-              </Component>
-            ) : (
-              <p>Error: no component found for {pascalCase(friendlyName)}</p>
-            )}
-          </div>
+          <>
+            <div className={flexContainer}>
+              {Component ? (
+                <Component {...rest}>
+                  <title>{friendlyName}</title>
+                </Component>
+              ) : (
+                <p>Error: no component found for {pascalCase(friendlyName)}</p>
+              )}
+            </div>
+            <ActionBar
+              name={name}
+              component={Component}
+              friendlyName={friendlyName}
+              isActionBarVisible={isActionBarVisible}
+              setIsActionBarVisible={setIsActionBarVisible}
+            />
+          </>
         )}
-        <ActionBar
-          name={name}
-          component={Component}
-          friendlyName={friendlyName}
-          isActionBarVisible={isActionBarVisible}
-          setIsActionBarVisible={setIsActionBarVisible}
-        />
       </div>
     </li>
   );

plugins/gatsby-theme-carbon-svgs/components/shared/SvgLibrary.module.scss

@@ -1,9 +1,6 @@
 .svg-page {
   margin-left: -$spacing-05;
   margin-right: -$spacing-05;
-
-  // prevent jank when icons load
-  min-height: 60vh;
 }
 
 .filter-row {
@@ -283,7 +280,7 @@ $svg-card-border: 1px solid $ui-03;
 
 .flex-container svg {
   fill: $icon-01;
-  animation: fadeIn $duration--fast-02 motion(standard, productive);
+  animation: fadeIn $duration--fast-01 motion(standard, productive);
 }
 
 @keyframes fadeIn {

plugins/gatsby-theme-carbon-svgs/components/shared/useIntersectionObserver.js

@@ -1,32 +1,37 @@
-import { useRef, useEffect, useState, useCallback } from 'react';
+import { useRef, useLayoutEffect, useState, useCallback } from 'react';
 
 const useIntersectionObserver = () => {
-  const targetRef = useRef();
-  const observerRef = useRef();
-
+  const [node, setNode] = useState(null);
   const [visible, setVisible] = useState(false);
+  const observerRef = useRef();
 
-  const callback = useCallback(
-    ([entry]) => {
-      if (entry.intersectionRatio) {
-        setVisible(true);
-      }
-    },
-    [setVisible]
-  );
-
-  useEffect(() => {
-    if (observerRef.current) return;
-    if (!targetRef.current) return;
-
-    observerRef.current = new IntersectionObserver(callback, {
-      rootMargin: '50%',
-    });
-
-    observerRef.current.observe(targetRef.current);
+  const disconnect = useCallback(() => {
+    const { current } = observerRef;
+    if (current) {
+      current.disconnect();
+    }
   }, []);
 
-  return [targetRef, visible];
+  const observe = useCallback(() => {
+    observerRef.current = new IntersectionObserver(
+      ([entry]) => setVisible(entry.isIntersecting),
+      {
+        rootMargin: '75%',
+      }
+    );
+    if (node) {
+      observerRef.current.observe(node);
+    }
+  }, [node]);
+
+  useLayoutEffect(() => {
+    observe();
+    return () => {
+      disconnect();
+    };
+  }, [observe, disconnect]);
+
+  return [setNode, visible];
 };
 
 export default useIntersectionObserver;