fix(example): stabilize attachment previews

Author: dciccale

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Keep web image bubbles fitted to their previews and replace attachment loading
+  flashes with stable image and voice-message placeholders.
 - Fix voice-message uploads and slide-to-cancel gestures in the Expo native
   example, and show concise user-facing errors instead of Convex stack traces.
 

apps/example/app/message-bubble.tsx

@@ -70,6 +70,12 @@ export function MessageBubble({
     .filter((part) => part.type === "text")
     .map((part) => (part.type === "text" ? part.text : ""))
     .join("\n");
+  const hasImage =
+    message.status === "published" &&
+    message.parts.some(
+      (part) =>
+        part.type === "attachment" && part.mediaType.startsWith("image/"),
+    );
 
   async function copyText() {
     if (text) await navigator.clipboard.writeText(text);
@@ -87,7 +93,7 @@ export function MessageBubble({
       )}
       <div className="message-stack">
         <article
-          className={`message ${mine ? "mine" : ""} ${message.status === "redacted" ? "deleted" : ""}`}
+          className={`message ${mine ? "mine" : ""} ${hasImage ? "image-message" : ""} ${message.status === "redacted" ? "deleted" : ""}`}
           onContextMenu={(event) => {
             event.preventDefault();
             setMenuOpen(true);
@@ -309,11 +315,14 @@ function Attachment({
     partId,
   });
 
-  if (!url) {
+  if (url === undefined) {
+    return <AttachmentPlaceholder mediaType={mediaType} />;
+  }
+  if (url === null) {
     return (
-      <div className="attachment-placeholder">
-        <Skeleton className="attachment-skeleton" />
-        <Skeleton className="attachment-skeleton-line" />
+      <div className="attachment-unavailable">
+        <FileText />
+        <span>{fallbackText} is unavailable</span>
       </div>
     );
   }
@@ -346,6 +355,47 @@ function Attachment({
   );
 }
 
+function AttachmentPlaceholder({ mediaType }: { mediaType: string }) {
+  if (mediaType.startsWith("image/")) {
+    return (
+      <div
+        className="attachment-placeholder image"
+        role="status"
+        aria-label="Loading image"
+      >
+        <Skeleton className="attachment-skeleton" />
+      </div>
+    );
+  }
+
+  if (mediaType.startsWith("audio/")) {
+    return (
+      <div
+        className="attachment-placeholder audio"
+        role="status"
+        aria-label="Loading voice message"
+      >
+        <Skeleton className="attachment-skeleton-audio-button" />
+        <div className="attachment-skeleton-audio-track">
+          <Skeleton className="attachment-skeleton-audio-label" />
+          <Skeleton className="attachment-skeleton-audio-line" />
+          <Skeleton className="attachment-skeleton-audio-time" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="attachment-placeholder file"
+      role="status"
+      aria-label="Loading attachment"
+    >
+      <Skeleton className="attachment-skeleton-line" />
+    </div>
+  );
+}
+
 function ImageAttachment({
   fallbackText,
   message,
@@ -361,6 +411,9 @@ function ImageAttachment({
 }) {
   const [open, setOpen] = useState(false);
   const [showReactions, setShowReactions] = useState(false);
+  const [loadState, setLoadState] = useState<"loading" | "loaded" | "error">(
+    "loading",
+  );
   const replyAfterClose = useRef(false);
 
   function closeAndReply() {
@@ -381,8 +434,30 @@ function ImageAttachment({
           className="message-image-trigger"
           type="button"
           aria-label={`Open ${fallbackText}`}
+          disabled={loadState !== "loaded"}
         >
-          <img className="message-image" src={url} alt={fallbackText} />
+          {loadState === "loading" && (
+            <div className="message-image-loading" aria-hidden="true">
+              <Skeleton />
+            </div>
+          )}
+          {loadState === "error" && (
+            <span className="message-image-error">Image unavailable</span>
+          )}
+          <img
+            className={`message-image ${loadState === "loaded" ? "loaded" : ""}`}
+            src={url}
+            alt={fallbackText}
+            decoding="async"
+            onLoad={(event) => {
+              const image = event.currentTarget;
+              void image
+                .decode()
+                .catch(() => undefined)
+                .then(() => setLoadState("loaded"));
+            }}
+            onError={() => setLoadState("error")}
+          />
         </button>
       </DialogTrigger>
       <DialogContent

apps/example/app/styles.css

@@ -496,6 +496,9 @@ select {
   background: #191916;
   box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
 }
+.message.image-message {
+  width: 444px;
+}
 .message.mine {
   border-color: rgb(255 91 53 / 23%);
   border-radius: 14px 14px 5px 14px;
@@ -646,12 +649,19 @@ select {
 .message-image {
   display: block;
   width: 100%;
-  max-height: 360px;
+  height: 100%;
   border-radius: 10px;
   object-fit: cover;
+  opacity: 0;
+  transition: opacity 140ms ease-out;
+}
+.message-image.loaded {
+  opacity: 1;
 }
 .message-image-trigger {
+  position: relative;
   width: min(100%, 420px);
+  aspect-ratio: 16 / 9;
   display: block;
   margin: -3px -5px 7px;
   padding: 0;
@@ -661,6 +671,25 @@ select {
   cursor: zoom-in;
   overflow: hidden;
 }
+.message-image-trigger:disabled {
+  cursor: default;
+}
+.message-image-loading,
+.message-image-loading > div,
+.message-image-error {
+  position: absolute;
+  inset: 0;
+}
+.message-image-loading > div {
+  border-radius: 10px;
+}
+.message-image-error {
+  display: grid;
+  place-items: center;
+  color: rgb(255 255 255 / 48%);
+  background: rgb(0 0 0 / 14%);
+  font-size: 12px;
+}
 .message-image-trigger:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: 3px;
@@ -762,19 +791,69 @@ select {
   }
 }
 .attachment-placeholder {
-  width: 270px;
-  display: grid;
-  gap: 8px;
-  padding: 5px;
+  max-width: 100%;
+}
+.attachment-placeholder.image {
+  width: 420px;
+  aspect-ratio: 16 / 9;
+  margin: -3px -5px 7px;
 }
-.attachment-skeleton {
-  height: 92px;
+.attachment-placeholder.image .attachment-skeleton {
+  width: 100%;
+  height: 100%;
   border-radius: 9px;
 }
+.attachment-placeholder.audio {
+  width: min(310px, 70vw);
+  min-width: 0;
+  height: 50px;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: center;
+  gap: 11px;
+}
+.attachment-skeleton-audio-button {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}
+.attachment-skeleton-audio-track {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.attachment-skeleton-audio-label {
+  width: 44%;
+  height: 9px;
+}
+.attachment-skeleton-audio-line {
+  width: 100%;
+  height: 3px;
+}
+.attachment-skeleton-audio-time {
+  width: 24px;
+  height: 8px;
+}
+.attachment-placeholder.file {
+  width: 270px;
+  padding: 10px 5px;
+}
 .attachment-skeleton-line {
   width: 48%;
   height: 8px;
 }
+.attachment-unavailable {
+  width: min(290px, 100%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 2px 0 5px;
+  color: rgb(255 255 255 / 48%);
+  font-size: 12px;
+}
+.attachment-unavailable svg {
+  width: 15px;
+}
 .message-attachment {
   width: min(290px, 100%);
   justify-content: flex-start;
@@ -801,7 +880,8 @@ select {
   align-items: center;
   gap: 11px;
 }
-.message:has(.audio-player) .message-meta {
+.message:has(.audio-player) .message-meta,
+.message:has(.attachment-placeholder.audio) .message-meta {
   position: absolute;
   right: 12px;
   bottom: 8px;
@@ -1182,6 +1262,9 @@ select {
   .audio-player {
     width: min(265px, 68vw);
   }
+  .attachment-placeholder.audio {
+    width: min(265px, 68vw);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1191,7 +1274,8 @@ select {
     animation: none;
   }
   .conversation,
-  .message-hover-actions {
+  .message-hover-actions,
+  .message-image {
     transition: none;
   }
 }