From b695b5669e4f5f71592c34102427c2ff820cf29a Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Wed, 23 Apr 2025 16:38:45 -0600
Subject: [PATCH] Enhance DiscourseContextOverlay: Update button styles to
 include loading state and improve score/ref display during loading. Use
 placeholders for score and refs when loading.

---
 apps/roam/src/components/DiscourseContextOverlay.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/roam/src/components/DiscourseContextOverlay.tsx b/apps/roam/src/components/DiscourseContextOverlay.tsx
index e7e69a316..25220de50 100644
--- a/apps/roam/src/components/DiscourseContextOverlay.tsx
+++ b/apps/roam/src/components/DiscourseContextOverlay.tsx
@@ -110,7 +110,9 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
         <Button
           small
           id={id}
-          className={"roamjs-discourse-context-overlay"}
+          className={`roamjs-discourse-context-overlay ${
+            loading ? "animate-pulse" : ""
+          }`}
           style={{
             minHeight: "initial",
             paddingTop: ".25rem",
@@ -121,9 +123,9 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
         >
           <div className="flex items-center gap-1.5">
             <Icon icon={"diagram-tree"} />
-            <span className="mr-1 leading-none">{score}</span>
+            <span className="mr-1 leading-none">{loading ? "-" : score}</span>
             <Icon icon={"link"} />
-            <span className="leading-none">{refs}</span>
+            <span className="leading-none">{loading ? "-" : refs}</span>
           </div>
         </Button>
       }
@@ -152,9 +154,9 @@ const Wrapper = ({ parent, tag }: { parent: HTMLElement; tag: string }) => {
     >
       <div className="flex items-center gap-1.5">
         <Icon icon={"diagram-tree"} />
-        <span className="mr-1">0</span>
+        <span className="mr-1">-</span>
         <Icon icon={"link"} />
-        <span>0</span>
+        <span>-</span>
       </div>
     </Button>
   );