latex rendering slowed pc down

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -8,6 +8,8 @@ import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
 import { useEffect, useState } from "react";
 import QuizPreview from "./QuizPreview";
 import { QuizButtons } from "./QuizButton";
+import ClientOnly from "@/components/ClientOnly";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 const helpString = `QUESTION REFERENCE
 ---
@@ -50,7 +52,6 @@ this is a matching question
 ^ left answer - right dropdown
 ^ other thing -  another option`;
 
-
 export default function EditQuiz({
   moduleName,
   quizName,
@@ -65,9 +66,10 @@ export default function EditQuiz({
   const [showHelp, setShowHelp] = useState(false);
 
   useEffect(() => {
-    const delay = 500;
+    const delay = 1000;
     const handler = setTimeout(() => {
       try {
+        console.log("checking if the same...");
         if (
           quizMarkdownUtils.toMarkdown(quiz) !==
           quizMarkdownUtils.toMarkdown(
@@ -94,7 +96,7 @@ export default function EditQuiz({
 
   return (
     <div className="h-full flex flex-col align-middle px-1">
-      <div className={"min-h-0 flex flex-row w-full"}>
+      <div className={"min-h-96 flex flex-row w-full"}>
         {showHelp && (
           <pre className=" max-w-96">
             <code>{helpString}</code>
@@ -105,14 +107,18 @@ export default function EditQuiz({
         </div>
         <div className="flex-1 h-full">
           <div className="text-red-300">{error && error}</div>
-          <QuizPreview quiz={quiz} />
+          <QuizPreview moduleName={moduleName} quizName={quizName} />
         </div>
       </div>
-      <QuizButtons
-        moduleName={moduleName}
-        quizName={quizName}
-        toggleHelp={() => setShowHelp((h) => !h)}
-      />
+      <ClientOnly>
+        <SuspenseAndErrorHandling>
+          <QuizButtons
+            moduleName={moduleName}
+            quizName={quizName}
+            toggleHelp={() => setShowHelp((h) => !h)}
+          />
+        </SuspenseAndErrorHandling>
+      </ClientOnly>
     </div>
   );
 }

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx

@@ -1,3 +1,4 @@
+import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import {
   LocalQuizQuestion,
@@ -6,7 +7,14 @@ import {
 import { quizQuestionMarkdownUtils } from "@/models/local/quiz/utils/quizQuestionMarkdownUtils";
 import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 
-export default function QuizPreview({ quiz }: { quiz: LocalQuiz }) {
+export default function QuizPreview({
+  moduleName,
+  quizName,
+}: {
+  quizName: string;
+  moduleName: string;
+}) {
+  const { data: quiz } = useQuizQuery(moduleName, quizName);
   return (
     <div style={{ overflow: "scroll", height: "100%" }}>
       <div className="columns-2">
@@ -40,13 +48,9 @@ export default function QuizPreview({ quiz }: { quiz: LocalQuiz }) {
       <div className="p-3" style={{ whiteSpace: "pre-wrap" }}>
         {quiz.description}
       </div>
-      <hr />
       <div className="p-3 rounded-md bg-slate-950 m-5 flex flex-col gap-3">
         {quiz.questions.map((question, i) => (
-          <QuizQuestionPreview
-            key={quizQuestionMarkdownUtils.toMarkdown(question)}
-            question={question}
-          />
+          <QuizQuestionPreview key={i} question={question} />
         ))}
       </div>
       <br />
@@ -102,7 +106,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
           {question.answers.map((answer) => (
             <div
               key={JSON.stringify(answer)}
-              className="mx-3 mb-1 bg-dark rounded border-slate-700 flex flex-row border"
+              className="mx-3 mb-1 pt-1 border-t border-slate-700 flex flex-row"
             >
               <div className="w-8 flex flex-col justify-center">
                 {answer.correct ? (