feat: Prevent click on loading image (#18309)

wireapp · Nov 14, 2024 · 6bd35b3 · 6bd35b3
1 parent e1e6ce8
commit 6bd35b3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/script/components/Image/Image.tsx b/src/script/components/Image/Image.tsx
@@ -117,8 +117,12 @@ export const Image = ({
     <InViewport
       onVisible={() => setIsInViewport(true)}
       css={getWrapperStyles(!!onClick)}
-      className={cx(className, {'loading-dots': isLoading})}
-      onClick={onClick}
+      className={cx(className, {'loading-dots image-asset--no-image': isLoading})}
+      onClick={event => {
+        if (!isLoading) {
+          onClick?.(event);
+        }
+      }}
       data-uie-status={isLoading ? 'loading' : 'loaded'}
       {...props}
     >

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -362,8 +362,10 @@
   cursor: pointer;
 
   &--no-image {
-    background-color: var(--foreground-fade-8);
-    cursor: default;
+    .message-asset & {
+      background-color: var(--foreground-fade-8);
+      cursor: default;
+    }
   }
 
   .image-icon svg {