From 597c05b86de8f7509cbd67f370f31fa5f5eae805 Mon Sep 17 00:00:00 2001
From: Ginger <75683114+gingershaped@users.noreply.github.com>
Date: Wed, 19 Feb 2025 10:34:57 -0500
Subject: [PATCH] Improve spoilered image UX with autoload off

---
 .../components/message/content/ImageContent.tsx    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index d2bde0fd..5d3e5512 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -151,7 +151,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             punch={1}
           />
         )}
-        {!autoPlay && srcState.status === AsyncStatus.Idle && (
+        {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <Button
               variant="Secondary"
@@ -178,7 +178,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             })}
           </Box>
         )}
-        {srcState.status === AsyncStatus.Success && blurred && (
+        {blurred && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <TooltipProvider
               tooltip={
@@ -198,7 +198,12 @@ export const ImageContent = as<'div', ImageContentProps>(
                   radii="Pill"
                   size="500"
                   outlined
-                  onClick={() => setBlurred(false)}
+                  onClick={() => {
+                    setBlurred(false);
+                    if (srcState.status === AsyncStatus.Idle) {
+                      loadSrc();
+                    }
+                  }}
                 >
                   <Text size="B300">Spoiler</Text>
                 </Chip>
@@ -207,7 +212,8 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
-          !load && (
+          !load &&
+          !markedAsSpoiler && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>