size codeblock for lazy loading

Author: Blargian

src/theme/CodeBlock/index.js

@@ -2,8 +2,16 @@ import React, {useState, useRef, useCallback, useEffect} from 'react';
 import CodeBlock from '@theme-original/CodeBlock';
 import styles from './styles.module.css';
 
+function countLines(text) {
+  // Split the string by newline characters
+  const lines = text.split('\n');
+  // Return the number of lines
+  return lines.length;
+}
 export default function CodeBlockWrapper(props) {
+  const lineHeight = 18.85;
   const [isLoaded, setIsLoaded] = useState(false);
+  const [estimatedHeight, setEstimatedHeight] = useState(countLines(props.children)*lineHeight);
   const codeBlockRef = useRef(null);
 
   const handleIntersection = useCallback((entries) => {
@@ -15,7 +23,7 @@ export default function CodeBlockWrapper(props) {
 
   useEffect(() => {
     const observer = new IntersectionObserver(handleIntersection, {
-      rootMargin: '0px 0px',
+      rootMargin: '200px 0px',
     });
 
     const currentRef = codeBlockRef.current; // Store current ref value
@@ -33,7 +41,7 @@ export default function CodeBlockWrapper(props) {
 
   if (!isLoaded) {
     return (
-        <div ref={codeBlockRef} className={styles.wrapper}>
+        <div ref={codeBlockRef} className={styles.wrapper} style={{ height: estimatedHeight + 'px' }}>
             <div className={styles.activity}></div>
         </div>
     );

src/theme/CodeBlock/styles.module.css

@@ -1,6 +1,5 @@
 .wrapper {
     position: relative;
-    height: 100px;
     width: 100%;
     z-index: 44;
     overflow: hidden;