Add fallback to avatar and post images (#101)

* Add new Avatar component

* Add image loading status to post images

* Remove test code

Author: MiracleDevPro

apps/web/app/user/[discordID]/page.tsx

@@ -6,6 +6,7 @@ import { getCanonicalUserUrl } from '@/utils/urls'
 import { Metadata } from 'next'
 import { db, sql } from '@nextjs-forum/db'
 import { notFound } from 'next/navigation'
+import { Avatar } from '@/components/avatar'
 
 export const revalidate = 60
 export const dynamic = 'error'
@@ -144,10 +145,10 @@ const UserInfo = async ({ params }: UserProps) => {
     <main className="w-full h-full flex flex-col items-center justify-center">
       <section className="w-full h-full flex flex-col xl:flex-row items-stretch justify-center max-w-7xl px-4 py-12 xl:py-16 gap-4 xl:gap-10">
         <div className="w-fit min-w-[20%] md:max-w-[50%] xl:max-w-[30%] flex flex-row items-stretch justify-start gap-4 shrink-0">
-          <img
-            className="size-16 rounded-full"
+          <Avatar
+            size={16}
             src={userData.avatarUrl}
-            alt={`User Avatar of ${userData.username}`}
+            username={userData.username}
           />
           <div className="w-fit h-auto flex flex-col items-start justify-start gap-1 max-w-[200px]">
             <h1 className="w-full text-xl md:text-2xl font-semibold text-white line-clamp-1">

apps/web/components/avatar.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { cn } from '@/utils/cn'
+import { useImageLoadingStatus } from '@/utils/hooks/useImageLoadingStatus'
+import { ComponentProps } from 'react'
+
+const sizeToClassName = {
+  4: 'w-4 h-4',
+  5: 'w-5 h-5',
+  10: 'w-10 h-10',
+  16: 'w-16 h-16',
+}
+
+const DEFAULT_AVATAR = 'https://cdn.discordapp.com/embed/avatars/1.png'
+
+type AvatarProps = ComponentProps<'img'> & {
+  size: keyof typeof sizeToClassName
+  username?: string
+}
+
+type LoadingStatus = 'loading' | 'loaded' | 'error'
+
+export const Avatar = ({
+  src,
+  size,
+  className,
+  referrerPolicy,
+  crossOrigin,
+  username,
+  ...props
+}: AvatarProps) => {
+  const loadingStatus = useImageLoadingStatus(src, {
+    referrerPolicy,
+    crossOrigin,
+  })
+
+  if (loadingStatus === 'loaded') {
+    return (
+      <img
+        src={src}
+        alt={username ? `${username}'s avatar` : ''}
+        className={cn('rounded-full', sizeToClassName[size], className)}
+        {...props}
+      />
+    )
+  }
+
+  if (loadingStatus === 'error') {
+    return (
+      <img
+        src={DEFAULT_AVATAR}
+        alt={username ? `${username}'s avatar` : ''}
+        className={cn('rounded-full', sizeToClassName[size], className)}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <span
+      className={cn('rounded-full bg-neutral-800', sizeToClassName[size])}
+      aria-busy="true"
+    />
+  )
+}

apps/web/components/message-content-media.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useImageLoadingStatus } from '@/utils/hooks/useImageLoadingStatus'
+import { ComponentProps } from 'react'
+
+export const MessageContentImage = ({
+  src,
+  alt,
+  ...props
+}: ComponentProps<'img'>) => {
+  const loadingStatus = useImageLoadingStatus(src)
+
+  if (loadingStatus === 'loaded') {
+    return <img src={src} alt={alt} {...props} />
+  }
+
+  const brokenMediaJsx = (
+    <div className="border border-neutral-700 rounded-lg px-2 py-1 text-neutral-400 text-sm min-h-8 flex items-center">
+      This media is unavailable, please check the original message on Discord
+    </div>
+  )
+
+  if (loadingStatus === 'error') {
+    return brokenMediaJsx
+  }
+
+  return (
+    <div className="relative" aria-label="Loading media" aria-busy="true">
+      {/* Most images will be broken so we will use the broken state to size this loading indicator,
+          this will avoid most layout shifts */}
+      <div aria-hidden="true">{brokenMediaJsx}</div>
+      <div className="absolute inset-0 bg-neutral-800" />
+    </div>
+  )
+}

apps/web/components/message-content.tsx

@@ -1,5 +1,6 @@
 import { parseDiscordMessage } from '@/utils/discord-markdown'
 import { isVideoLink } from '@/utils/video'
+import { MessageContentImage } from './message-content-media'
 
 export type Attachment = {
   id: string
@@ -39,7 +40,7 @@ export const MessageContent = async ({
                 controls
               ></video>
             ) : (
-              <img
+              <MessageContentImage
                 src={attachment.url}
                 alt="Image"
                 className="max-w-full h-auto object-cover"

apps/web/components/message.tsx

@@ -7,6 +7,7 @@ import { DisplayLocalTime } from './local-time'
 import { Attachment, MessageContent } from './message-content'
 import { DeletedReply, MessageReply, Reply } from '@/components/reply'
 import { MessageWrapper } from '@/components/message-wrapper'
+import { Avatar } from './avatar'
 type MessageProps = {
   snowflakeId: string
   content: string
@@ -48,10 +49,10 @@ export const Message = ({
           <div className="flex flex-row">
             <div className="flex w-[50px] shrink-0 items-start justify-start sm:w-[60px]">
               {isFirstRow ? (
-                <img
+                <Avatar
                   src={author.avatarUrl}
-                  alt="Avatar"
-                  className="h-10 w-10 rounded-full"
+                  size={10}
+                  username={author.username}
                 />
               ) : (
                 <time

apps/web/components/most-helpful.tsx

@@ -1,6 +1,7 @@
 import { db } from '@nextjs-forum/db'
 import { CheckCircleSolidIcon } from '@/components/icons/check-circle-solid'
 import Link from 'next/link'
+import { Avatar } from './avatar'
 
 const getMostHelpfulUsers = async () => {
   return db
@@ -32,11 +33,7 @@ export const MostHelpful = async () => {
         {users.map((user) => (
           <div key={user.id} className="flex justify-between py-2">
             <div className="flex space-x-2 items-center">
-              <img
-                src={user.avatarUrl}
-                alt="Avatar"
-                className="w-4 h-4 rounded-full"
-              />
+              <Avatar src={user.avatarUrl} size={4} username={user.username} />
               {user.isPublic ? (
                 <Link
                   className="opacity-90 text-white line-clamp-1 max-w-[200px]"

apps/web/components/post.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import plur from 'plur'
 import { buildPostTimeValues } from '@/utils/datetime'
+import { Avatar } from './avatar'
 
 type PostProps = {
   id: string
@@ -35,11 +36,7 @@ export const Post = ({
         </p>
 
         <div className="mt-2 flex items-center space-x-2">
-          <img
-            src={author.avatar}
-            alt={`${author.username}'s avatar`}
-            className="rounded-full w-5 h-5"
-          />
+          <Avatar src={author.avatar} size={5} username={author.username} />
           <div className="text-sm opacity-90 no-underline">
             {author.username} asked on{' '}
             <time dateTime={createdAtTimes.iso} title={createdAtTimes.tooltip}>

apps/web/components/reply.tsx

@@ -3,6 +3,7 @@ import { ImageIcon } from '@/components/icons/image'
 import { BadReplyIcon } from '@/components/icons/reply-bad'
 import { ReplySplineIcon } from '@/components/icons/reply-spline'
 import { Attachment } from '@/components/message-content'
+import { Avatar } from './avatar'
 export type Reply = {
   author: {
     username: string
@@ -23,10 +24,10 @@ export const MessageReply = ({ reply }: { reply: Reply }) => {
         <ReplySplineIcon className="size-10 pt-2" />
       </div>
       <div className="flex w-0 flex-1 flex-row flex-nowrap items-center justify-start gap-2 text-xs md:text-base">
-        <img
+        <Avatar
           src={reply.author.avatarUrl}
-          alt="Avatar"
-          className="size-5 shrink-0 rounded-full"
+          size={5}
+          username={reply.author.username}
         />
 
         <div className="line-clamp-2 w-0 flex-1 text-left text-sm md:line-clamp-1">

apps/web/utils/hooks/useImageLoadingStatus.ts

@@ -0,0 +1,35 @@
+import { ComponentProps, useLayoutEffect } from 'react'
+import { useState } from 'react'
+
+// Code based on https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/avatar/src/avatar.tsx#L119
+
+type LoadingStatus = 'loading' | 'loaded' | 'error'
+
+export const useImageLoadingStatus = (
+  src: string | undefined,
+  { referrerPolicy, crossOrigin }: ComponentProps<'img'> = {},
+) => {
+  const [loadingStatus, setLoadingStatus] = useState<LoadingStatus>('loading')
+
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus('error')
+      return
+    }
+
+    const image = new window.Image()
+
+    image.onload = () => setLoadingStatus('loaded')
+    image.onerror = () => setLoadingStatus('error')
+
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy
+    }
+    if (typeof crossOrigin === 'string') {
+      image.crossOrigin = crossOrigin
+    }
+    image.src = src
+  }, [src, referrerPolicy, crossOrigin])
+
+  return loadingStatus
+}