From 9dfdc8683d114d09d69b84ae5b9a8e823ce0bd0e Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 09:23:07 +0800
Subject: [PATCH] fix: prevent flashing when updating code

---
 frontend/src/components/Preview.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index de0134f..3a603ff 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
 
@@ -8,12 +9,22 @@ interface Props {
 
 function Preview({ code, device }: Props) {
   const throttledCode = useThrottle(code, 200);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe && iframe.contentDocument) {
+      iframe.contentDocument.open();
+      iframe.contentDocument.write(throttledCode);
+      iframe.contentDocument.close();
+    }
+  }, [throttledCode]);
 
   return (
     <div className="flex justify-center mx-2">
       <iframe
+        ref={iframeRef}
         title="Preview"
-        srcDoc={throttledCode}
         className={classNames(
           "border-[4px] border-black rounded-[20px] shadow-lg",
           "transform scale-[0.9] origin-top",
@@ -26,4 +37,5 @@ function Preview({ code, device }: Props) {
     </div>
   );
 }
-export default Preview;
+
+export default Preview;
\ No newline at end of file