perf: line number blink

TeamVastsea · Nov 2, 2024 · 271c969 · 271c969
1 parent c25591a
commit 271c969
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/doc/docs/components/show/code/basic-usage.tsx b/doc/docs/components/show/code/basic-usage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Code, CodeFile} from '@qwqui/core';
 
 export default function App(){
-  const codes = Array.from({length:10000}).fill('console.log("aaa");').join('\n');
+  const codes = Array.from({length:1000}).fill('console.log("aaa");').join('\n');
   return (
     <Code>
       <CodeFile name="index.ts" code="// Comment" language="javascript" />

diff --git a/packages/components/code/src/code-body.tsx b/packages/components/code/src/code-body.tsx
@@ -10,6 +10,7 @@ export const CodeBody = () => {
   const {activeCode,codeFiles, cache, setCache,init} = useContext<CodeContextType>(CodeContext);
   const [codeLanguage, setCodeLanguage] = useState('');
   const [activeCodeFile, setActvieCodeFile] = useState<CodeFileProps>();
+  const [hidden, setHidden] = useState(false);
   const codeBodyDom = useRef<HTMLDivElement>();
   useEffect(()=>{
     const [codeFile] = codeFiles.filter((file) => file.name === activeCode);
@@ -27,15 +28,17 @@ export const CodeBody = () => {
     if(!codeBodyDom.current && loading){
       return;
     }
+    setHidden(true);
     const ele = codeBodyDom.current;
     const lastChild= ele.querySelectorAll('code > span:last-child > :first-child')[0];
     if (lastChild){
       const width = (lastChild as HTMLElement).offsetWidth;
       ele.style['--line-number-width']=`${width}px`;
       ele.style.setProperty('--line-number-width', `${width}px`)
     }
+    setHidden(false);
   },[init, loading]);
   return  (
-    <div ref={codeBodyDom} className={style.root} dangerouslySetInnerHTML={{__html: html}}></div>
+    <div ref={codeBodyDom} aria-hidden={hidden} className={style.root} dangerouslySetInnerHTML={{__html: html}}></div>
   )
 }
diff --git a/packages/components/code/src/code-context.ts b/packages/components/code/src/code-context.ts
@@ -17,5 +17,5 @@ export type CodeContextType = {
   setPrevWidth: React.Dispatch<React.SetStateAction<number>>;
   cache: Record<string, string>;
   setCache: React.Dispatch<React.SetStateAction<Record<string,string>>>;
-  init: boolean
+  init: boolean;
 }
diff --git a/packages/components/code/src/code.tsx b/packages/components/code/src/code.tsx
@@ -75,8 +75,8 @@ export const Code = factory<CodeWrapper>((props)=>{
     }}>
       <div className={style.root}>
         <CodeHeader />
-        {!loading && <CodeBody />}
-        {!loading && props.children}
+        <CodeBody />
+        {props.children}
       </div>
     </CodeContext.Provider>
   )

diff --git a/packages/components/code/src/styles/code-body.module.scss b/packages/components/code/src/styles/code-body.module.scss
@@ -3,4 +3,9 @@
   padding: 11px 12px;
   font-family: 'Inter';
   font-weight: regular;
+  opacity: 1;
+  --line-number-width: 48px;
+  &[aria-hidden=true]{
+    opacity: 0;
+  }
 }