From 200f83067c477f2ed498ac899a8dbd298f65f090 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Jul 2025 17:19:57 -0500
Subject: [PATCH] Display a placeholder graphic when a group image isn't
 available

---
 src/pages/GroupDetail.tsx     | 22 +++++++++++-----------
 src/pages/GroupGuidelines.tsx | 23 +++++++++++------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/pages/GroupDetail.tsx b/src/pages/GroupDetail.tsx
index 417b9212..211a0c89 100644
--- a/src/pages/GroupDetail.tsx
+++ b/src/pages/GroupDetail.tsx
@@ -550,11 +550,17 @@ export default function GroupDetail() {
         <div className="flex gap-4">
           <div className="flex-1">
             <div className="h-40 rounded-lg overflow-hidden mb-2 relative">
-              {imageLoading && (
+              {imageLoading && image && (
                 <Skeleton className="absolute inset-0 w-full h-full z-10" />
               )}
-              {/* Check if the image URL is likely a video */}
-              {image && image.match(/\.(mp4|webm|ogg|mov)$/i) ? (
+              {!image ? (
+                // Show a nice gradient background when no image is provided
+                <div className="w-full h-full bg-gradient-to-br from-blue-100 via-purple-50 to-pink-100 dark:from-blue-900/20 dark:via-purple-900/20 dark:to-pink-900/20 flex items-center justify-center">
+                  <div className="text-center text-muted-foreground">
+                    <Users className="h-12 w-12 mx-auto opacity-40" />
+                  </div>
+                </div>
+              ) : image.match(/\.(mp4|webm|ogg|mov)$/i) ? (
                 <video
                   src={image}
                   className="w-full h-full object-cover object-center"
@@ -563,13 +569,8 @@ export default function GroupDetail() {
                   loop
                   playsInline
                   onLoadedData={() => setImageLoading(false)}
-                  onError={(e) => {
+                  onError={() => {
                     setImageLoading(false);
-                    // Fall back to placeholder if video fails
-                    const parent = e.currentTarget.parentElement;
-                    if (parent) {
-                      parent.innerHTML = '<img src="/placeholder-community.svg" class="w-full h-full object-cover object-center" />';
-                    }
                   }}
                 />
               ) : (
@@ -578,9 +579,8 @@ export default function GroupDetail() {
                   alt={name}
                   className="w-full h-full object-cover object-center"
                   onLoad={() => setImageLoading(false)}
-                  onError={(e) => {
+                  onError={() => {
                     setImageLoading(false);
-                    e.currentTarget.src = "/placeholder-community.svg";
                   }}
                 />
               )}
diff --git a/src/pages/GroupGuidelines.tsx b/src/pages/GroupGuidelines.tsx
index 2db89f1c..39624bcc 100644
--- a/src/pages/GroupGuidelines.tsx
+++ b/src/pages/GroupGuidelines.tsx
@@ -105,23 +105,22 @@ export default function GroupGuidelines() {
         <div className="flex gap-4">
           <div className="flex-1">
             <div className="h-36 rounded-lg overflow-hidden mb-2 relative">
-              {image ? (
+              {!image ? (
+                // Show a nice gradient background when no image is provided
+                <div className="w-full h-full bg-gradient-to-br from-blue-100 via-purple-50 to-pink-100 dark:from-blue-900/20 dark:via-purple-900/20 dark:to-pink-900/20 flex items-center justify-center">
+                  <div className="text-center text-muted-foreground">
+                    <div className="h-12 w-12 mx-auto bg-primary/20 rounded-full flex items-center justify-center">
+                      <span className="text-2xl font-bold text-primary">{name.charAt(0).toUpperCase()}</span>
+                    </div>
+                  </div>
+                </div>
+              ) : (
                 <img
                   src={image}
                   alt={name}
                   className="w-full h-full object-cover object-center"
-                  onError={(e) => {
-                    e.currentTarget.style.display = "none";
-                    const fallback = e.currentTarget.nextElementSibling as HTMLElement;
-                    if (fallback) fallback.style.display = "flex";
-                  }}
                 />
-              ) : null}
-              <div 
-                className={`w-full h-full bg-primary/10 text-primary font-bold text-4xl flex items-center justify-center ${image ? 'hidden' : 'flex'}`}
-              >
-                {name.charAt(0).toUpperCase()}
-              </div>
+              )}
             </div>
 
             <div className="flex flex-row items-start justify-between gap-4 mb-2">