Render sandpack when it in view

components/RUA/RUASandpack.tsx

@@ -2,25 +2,25 @@ import { FC, useEffect, useState } from 'react';
 import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import '@codesandbox/sandpack-react/dist/index.css';
 import { useTheme } from 'next-themes';
+import useInView from 'lib/hooks/useInView';
 
 interface Props extends SandpackProps {}
 
 const RUASandpack: FC<Props> = ({ ...rest }) => {
-  const [mounted, setMounted] = useState(false);
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
-  useEffect(() => setMounted(true), []);
-
-  if (!mounted) return null;
+  const { ref, inView } = useInView();
 
   return (
     <>
-      <div className="my-2">
-        <Sandpack
-          {...rest}
-          theme={currentTheme === 'dark' ? 'dark' : 'light'}
-        />
+      <div className="my-2 min-h-[402px]" ref={ref}>
+        {inView && (
+          <Sandpack
+            {...rest}
+            theme={currentTheme === 'dark' ? 'dark' : 'light'}
+          />
+        )}
       </div>
     </>
   );

components/mdx/Image.tsx

@@ -11,7 +11,7 @@ interface Props
 const Image = ({ src, alt }: Props) => {
   return (
     <>
-      <p className={styles.imageContainer}>
+      <span className={styles.imageContainer}>
         <NextImage
           src={src ?? ''}
           alt={alt}
@@ -19,7 +19,7 @@ const Image = ({ src, alt }: Props) => {
           className={styles.image}
         />
         {alt && <span className="block text-center text-gray-400">{alt}</span>}
-      </p>
+      </span>
     </>
   );
 };

lib/hooks/useInView.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useInView = () => {
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (ref.current) {
+            setInView(true);
+            observer.unobserve(ref.current);
+          }
+        }
+      });
+    });
+
+    ref.current && observer.observe(ref.current);
+  }, []);
+
+  return { ref, inView };
+};
+
+export default useInView;