From 9ef8b39c167eac6c80001bedc576d330d2c125ef Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 26 Nov 2024 18:32:56 +0000
Subject: [PATCH] Improve loading state for code block (#5520)

DASH-473
---
 .../components/blocks/code-segment.client.tsx |  1 -
 .../components/ui/code/CodeBlockContainer.tsx | 50 ++++++++++++++
 .../src/@/components/ui/code/RenderCode.tsx   | 69 +++----------------
 .../src/@/components/ui/code/code.client.tsx  | 23 +++----
 .../@/components/ui/code/plaintext-code.tsx   | 49 +++----------
 .../[contractAddress]/embed/embed-setup.tsx   |  6 +-
 .../src/components/connect/CodePlayground.tsx |  1 -
 .../published-contract/markdown-renderer.tsx  | 10 +--
 .../shared/sources-accordion.tsx              | 12 +---
 9 files changed, 90 insertions(+), 131 deletions(-)
 create mode 100644 apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx

diff --git a/apps/dashboard/src/@/components/blocks/code-segment.client.tsx b/apps/dashboard/src/@/components/blocks/code-segment.client.tsx
index 4789ca76888..594a088bb1d 100644
--- a/apps/dashboard/src/@/components/blocks/code-segment.client.tsx
+++ b/apps/dashboard/src/@/components/blocks/code-segment.client.tsx
@@ -109,7 +109,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
         <>
           <CodeClient
             code={code}
-            loadingClassName="min-h-[450px] rounded-none border-none"
             className="rounded-none border-none"
             lang={
               isInstallCommand
diff --git a/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
new file mode 100644
index 00000000000..f00f0ffd2f9
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { ScrollShadow } from "../ScrollShadow/ScrollShadow";
+import { Button } from "../button";
+
+export function CodeBlockContainer(props: {
+  codeToCopy: string;
+  children: React.ReactNode;
+  className?: string;
+  scrollableClassName?: string;
+  copyButtonClassName?: string;
+}) {
+  const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
+
+  return (
+    <div
+      className={cn(
+        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-background",
+        props.className,
+      )}
+    >
+      <ScrollShadow
+        scrollableClassName={cn("p-4", props.scrollableClassName)}
+        className="text-xs md:text-sm [&_*]:leading-relaxed"
+        shadowColor="hsl(var(--muted))"
+      >
+        {props.children}
+      </ScrollShadow>
+
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={onCopy}
+        className={cn(
+          "absolute top-3.5 right-3.5 h-auto bg-background p-2",
+          props.copyButtonClassName,
+        )}
+      >
+        {hasCopied ? (
+          <CheckIcon className="size-3 text-green-500" />
+        ) : (
+          <CopyIcon className="size-3 text-muted-foreground" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/@/components/ui/code/RenderCode.tsx b/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
index dad2918b8e9..8a0197c2409 100644
--- a/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
+++ b/apps/dashboard/src/@/components/ui/code/RenderCode.tsx
@@ -1,70 +1,23 @@
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
-import { Button } from "@/components/ui/button";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { CodeBlockContainer } from "./CodeBlockContainer";
 
 export function RenderCode(props: {
   code: string;
   html: string;
   className?: string;
   scrollableClassName?: string;
+  copyButtonClassName?: string;
 }) {
   return (
-    <div
-      className={cn(
-        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-background",
-        props.className,
-      )}
+    <CodeBlockContainer
+      codeToCopy={props.code}
+      className={props.className}
+      copyButtonClassName={props.copyButtonClassName}
+      scrollableClassName={props.scrollableClassName}
     >
-      <ScrollShadow
-        scrollableClassName={cn("p-4", props.scrollableClassName)}
-        className="text-xs md:text-sm [&_*]:leading-relaxed"
-        shadowColor="hsl(var(--muted))"
-      >
-        <div
-          // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here
-          dangerouslySetInnerHTML={{ __html: props.html }}
-        />
-      </ScrollShadow>
-      <CopyButton
-        text={props.code}
-        iconClassName="size-3"
-        className="absolute top-4 right-4 z-10 border border-border bg-background p-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here
+        dangerouslySetInnerHTML={{ __html: props.html }}
       />
-    </div>
-  );
-}
-
-function CopyButton(props: {
-  text: string;
-  className?: string;
-  iconClassName?: string;
-}) {
-  const [isCopied, setIsCopied] = useState(false);
-  return (
-    <ToolTipLabel label="Copy">
-      <Button
-        variant="ghost"
-        aria-label="Copy"
-        className={cn("h-auto w-auto p-1", props.className)}
-        onClick={() => {
-          navigator.clipboard.writeText(props.text);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
-        }}
-      >
-        {isCopied ? (
-          <CheckIcon
-            className={cn("size-4 text-green-500", props.iconClassName)}
-          />
-        ) : (
-          <CopyIcon
-            className={cn("size-4 text-muted-foreground", props.iconClassName)}
-          />
-        )}
-      </Button>
-    </ToolTipLabel>
+    </CodeBlockContainer>
   );
 }
diff --git a/apps/dashboard/src/@/components/ui/code/code.client.tsx b/apps/dashboard/src/@/components/ui/code/code.client.tsx
index 927181c597b..d36da1075f6 100644
--- a/apps/dashboard/src/@/components/ui/code/code.client.tsx
+++ b/apps/dashboard/src/@/components/ui/code/code.client.tsx
@@ -1,19 +1,17 @@
 "use client";
-
-import { cn } from "@/lib/utils";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import type { BundledLanguage } from "shiki";
-import { Spinner } from "../../ui/Spinner/Spinner";
 import { RenderCode } from "./RenderCode";
 import { getCodeHtml } from "./getCodeHtml";
+import { PlainTextCodeBlock } from "./plaintext-code";
 
 export type CodeProps = {
   code: string;
   lang: BundledLanguage;
   className?: string;
   scrollableClassName?: string;
-  loadingClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
+  copyButtonClassName?: string;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -21,8 +19,8 @@ export const CodeClient: React.FC<CodeProps> = ({
   lang,
   className,
   scrollableClassName,
-  loadingClassName,
   keepPreviousDataOnCodeChange = false,
+  copyButtonClassName,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
@@ -35,14 +33,12 @@ export const CodeClient: React.FC<CodeProps> = ({
 
   if (!codeQuery.data) {
     return (
-      <div
-        className={cn(
-          "flex min-h-[200px] items-center justify-center rounded-lg border border-border",
-          loadingClassName,
-        )}
-      >
-        <Spinner className="size-8" />
-      </div>
+      <PlainTextCodeBlock
+        code={code}
+        className={className}
+        scrollableClassName={scrollableClassName}
+        copyButtonClassName={copyButtonClassName}
+      />
     );
   }
 
@@ -52,6 +48,7 @@ export const CodeClient: React.FC<CodeProps> = ({
       html={codeQuery.data.html}
       className={className}
       scrollableClassName={scrollableClassName}
+      copyButtonClassName={copyButtonClassName}
     />
   );
 };
diff --git a/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx b/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
index 595714d58a1..9d5f6111ca2 100644
--- a/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
+++ b/apps/dashboard/src/@/components/ui/code/plaintext-code.tsx
@@ -1,10 +1,5 @@
-"use client";
-
 import { cn } from "@/lib/utils";
-import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { ScrollShadow } from "../ScrollShadow/ScrollShadow";
-import { Button } from "../button";
+import { CodeBlockContainer } from "./CodeBlockContainer";
 
 export function PlainTextCodeBlock(props: {
   code: string;
@@ -13,40 +8,16 @@ export function PlainTextCodeBlock(props: {
   scrollableClassName?: string;
   codeClassName?: string;
 }) {
-  const { hasCopied, onCopy } = useClipboard(props.code);
-
   return (
-    <div
-      className={cn(
-        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-background",
-        props.className,
-      )}
+    <CodeBlockContainer
+      codeToCopy={props.code}
+      className={props.className}
+      copyButtonClassName={props.copyButtonClassName}
+      scrollableClassName={props.scrollableClassName}
     >
-      <ScrollShadow
-        scrollableClassName={cn("p-4", props.scrollableClassName)}
-        className="text-xs md:text-sm [&_*]:leading-relaxed"
-        shadowColor="hsl(var(--muted))"
-      >
-        <code className={cn("block whitespace-pre", props.codeClassName)}>
-          {props.code}
-        </code>
-      </ScrollShadow>
-
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={onCopy}
-        className={cn(
-          "absolute top-3.5 right-3.5 h-auto bg-background p-2",
-          props.copyButtonClassName,
-        )}
-      >
-        {hasCopied ? (
-          <CheckIcon className="size-3 text-green-500" />
-        ) : (
-          <CopyIcon className="size-3 text-muted-foreground" />
-        )}
-      </Button>
-    </div>
+      <code className={cn("block whitespace-pre", props.codeClassName)}>
+        {props.code}
+      </code>
+    </CodeBlockContainer>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
index 69c8e49bbd7..d21b2d46eb9 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx
@@ -529,11 +529,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
 
         <Card className="flex w-full flex-col gap-2 md:w-1/2">
           <Heading size="title.sm">Embed Code</Heading>
-          <CodeClient
-            code={embedCode}
-            lang="html"
-            loadingClassName="min-h-[190px]"
-          />
+          <CodeClient code={embedCode} lang="html" />
           <Button
             className="w-auto gap-2"
             variant="outline"
diff --git a/apps/dashboard/src/components/connect/CodePlayground.tsx b/apps/dashboard/src/components/connect/CodePlayground.tsx
index 3174e39c617..24f08a0ccd1 100644
--- a/apps/dashboard/src/components/connect/CodePlayground.tsx
+++ b/apps/dashboard/src/components/connect/CodePlayground.tsx
@@ -325,7 +325,6 @@ const CodePlayground = ({
 
         <QueryClientProvider client={queryClient}>
           <CodeClient
-            loadingClassName="min-h-[490px]"
             code={code}
             lang={
               environment === "react" || environment === "react-native"
diff --git a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
index 88b6c3a47d0..bbf0815a4af 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
@@ -90,10 +90,12 @@ export const MarkdownRenderer: React.FC<{
             if (props?.className) {
               if (disableCodeHighlight) {
                 return (
-                  <PlainTextCodeBlock
-                    {...cleanedProps(props)}
-                    code={onlyText(props.children).trim()}
-                  />
+                  <div className="mb-4">
+                    <PlainTextCodeBlock
+                      {...cleanedProps(props)}
+                      code={onlyText(props.children).trim()}
+                    />
+                  </div>
                 );
               }
               const language = props.className.replace("language-", "");
diff --git a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
index 0314479df80..641b24f2671 100644
--- a/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
+++ b/apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx
@@ -38,11 +38,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
               </AccordionButton>
               <AccordionPanel>
                 {isExpanded && (
-                  <CodeClient
-                    code={JSON.stringify(abi, null, 2)}
-                    lang="json"
-                    loadingClassName="min-h-[500px]"
-                  />
+                  <CodeClient code={JSON.stringify(abi, null, 2)} lang="json" />
                 )}
               </AccordionPanel>
             </>
@@ -67,11 +63,7 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
               </AccordionButton>
               <AccordionPanel>
                 {isExpanded && (
-                  <CodeClient
-                    code={signature.source.trim()}
-                    lang="solidity"
-                    loadingClassName="min-h-[500px]"
-                  />
+                  <CodeClient code={signature.source.trim()} lang="solidity" />
                 )}
               </AccordionPanel>
             </>