Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.7 kB · 54 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455"use client";
import { useImageUploadStatus } from "src/utils/imageUploadStatus";import { ImageErrorState, type ImageLoadStatus,} from "components/ImageLoadState";import { DotLoader } from "components/utils/DotLoader";
// The one overlay for everything that can be wrong with an editor image,// rendered inside the image's relative-positioned wrapper. Upload state// (loader chip while in flight, retry scrim on failure) takes precedence over// a render failure (reload), since until the upload lands a load error is// moot. `uploadSrc` is the storage URL upload status is tracked under (the// same key as localImages). Published surfaces never upload and use// ImageErrorState directly instead.export function ImageStatusOverlay(props: { uploadSrc?: string; loadStatus?: ImageLoadStatus; onReload?: () => void; compact?: boolean; className?: string;}) { let upload = useImageUploadStatus((s) => props.uploadSrc ? s.uploads[props.uploadSrc] : undefined, ); if (upload?.state === "uploading") return ( <div className="absolute top-1 left-1 z-10 rounded-md bg-bg-page/80 text-secondary pointer-events-none"> <DotLoader /> </div> ); if (upload?.state === "failed") return ( <ImageErrorState message="Upload didn't finish," actionLabel="try again?" onAction={upload.retry} compact={props.compact} className={props.className} /> ); if (props.loadStatus === "error" && props.onReload) return ( <ImageErrorState message="Something went wrong," actionLabel="reload?" onAction={props.onReload} compact={props.compact} className={props.className} /> ); return null;}