Add a waiting modal for image uploads and display image thumbnails in the media library

Implement a loading dialog for ongoing image uploads and display actual image previews within the media library component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/AfZNdRv
This commit is contained in:
michaelschal committed 2025-10-09 11:54:15 +00:00
1 parent ca0d3c6ff6
commit d7f8472798
3 files changed
+26 -7

No files matched your search

+6 -2
View File
@@ -131,11 +131,15 @@ export default function MediaUpload() {
className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
data-testid={`media-item-${media.id}`}
>
<div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0">
<div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0 overflow-hidden">
{media.type === "video" ? (
<Video className="w-7 h-7 text-secondary" />
) : (
<ImageIcon className="w-7 h-7 text-primary" />
<img
src={media.originalUrl}
alt={media.fileName}
className="w-full h-full object-cover"
/>
)}
</div>
<div className="flex-1 min-w-0">