feat: conditionally load GitHub avatars only when handles exist

src/components/CmdKMenu.tsx

@@ -486,17 +486,23 @@ const CmdKMenu = () => {
               onClick={() => !disabled && handleItemSelect(item)}
             >
               <div className="flex items-center gap-2 min-w-0 flex-1">
-                <img
-                  src={`https://github.com/${data.github_username}.png`}
-                  alt={`${data.github_username} avatar`}
-                  className="w-6 h-6 rounded-full flex-shrink-0"
-                  onError={(e) => {
-                    const target = e.target as HTMLImageElement
-                    target.style.display = "none"
-                    target.nextElementSibling?.classList.remove("hidden")
-                  }}
-                />
-                <User className="w-6 h-6 text-gray-400 flex-shrink-0 hidden" />
+                {data.github_username ? (
+                  <>
+                    <img
+                      src={`https://github.com/${data.github_username}.png`}
+                      alt={`${data.github_username} avatar`}
+                      className="w-6 h-6 rounded-full flex-shrink-0"
+                      onError={(e) => {
+                        const target = e.target as HTMLImageElement
+                        target.style.display = "none"
+                        target.nextElementSibling?.classList.remove("hidden")
+                      }}
+                    />
+                    <User className="w-6 h-6 text-gray-400 flex-shrink-0 hidden" />
+                  </>
+                ) : (
+                  <User className="w-6 h-6 text-gray-400 flex-shrink-0" />
+                )}
                 <div className="flex flex-col min-w-0 flex-1">
                   <span className="font-medium text-gray-900 truncate">
                     {renderHighlighted(data, data.github_username)}

src/components/HeaderLogin.tsx

@@ -34,10 +34,12 @@ export const HeaderLogin = () => {
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
         <Avatar className="w-8 h-8 login-avatar">
-          <AvatarImage
-            src={`https://github.com/${session?.github_username}.png`}
-            alt={`${session?.github_username}'s profile picture`}
-          />
+          {session?.github_username && (
+            <AvatarImage
+              src={`https://github.com/${session?.github_username}.png`}
+              alt={`${session?.github_username}'s profile picture`}
+            />
+          )}
           <AvatarFallback aria-label="User avatar fallback">
             <User size={16} aria-hidden="true" />
           </AvatarFallback>

src/components/UserCard.tsx

@@ -35,20 +35,28 @@ export const UserCard: React.FC<UserCardProps> = ({
     >
       <div className="flex items-start gap-4">
         <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
-          <img
-            src={`https://github.com/${account.github_username}.png`}
-            alt={`${account.github_username} avatar`}
-            className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
-            onError={(e) => {
-              const target = e.target as HTMLImageElement
-              target.style.display = "none"
-              target.nextElementSibling?.classList.remove("hidden")
-              target.nextElementSibling?.classList.add("flex")
-            }}
-          />
-          <div className="hidden items-center justify-center h-full w-full">
-            <User className="w-6 h-6 text-gray-300" />
-          </div>
+          {account.github_username ? (
+            <>
+              <img
+                src={`https://github.com/${account.github_username}.png`}
+                alt={`${account.github_username} avatar`}
+                className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement
+                  target.style.display = "none"
+                  target.nextElementSibling?.classList.remove("hidden")
+                  target.nextElementSibling?.classList.add("flex")
+                }}
+              />
+              <div className="hidden items-center justify-center h-full w-full">
+                <User className="w-6 h-6 text-gray-300" />
+              </div>
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full w-full">
+              <User className="w-6 h-6 text-gray-300" />
+            </div>
+          )}
         </div>
         <div className="flex-1 min-w-0 flex flex-col justify-center my-auto">
           <div className="flex justify-between items-start">

src/components/organization/OrganizationCard.tsx

@@ -84,11 +84,13 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
         {/* Organization Avatar */}
         <div className="flex-shrink-0">
           <Avatar className="h-16 w-16 border-2 border-gray-100">
-            <AvatarImage
-              src={`https://github.com/${organization.name}.png`}
-              alt={`${organization.name} avatar`}
-              className="object-cover"
-            />
+            {organization.name && (
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+            )}
             <AvatarFallback className="bg-blue-100 text-blue-600 font-semibold text-lg">
               {organization.name
                 ?.split(" ")

src/components/organization/OrganizationHeader.tsx

@@ -41,11 +41,13 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         <div className="block sm:hidden">
           <div className="flex flex-col items-center text-center space-y-4">
             <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
+              {organization.name && (
+                <AvatarImage
+                  src={`https://github.com/${organization.name}.png`}
+                  alt={`${organization.name} avatar`}
+                  className="object-cover"
+                />
+              )}
               <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
                 {(organization.name || "")
                   .split(" ")
@@ -97,11 +99,13 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         <div className="hidden sm:block">
           <div className="flex items-center gap-6">
             <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
+              {organization.name && (
+                <AvatarImage
+                  src={`https://github.com/${organization.name}.png`}
+                  alt={`${organization.name} avatar`}
+                  className="object-cover"
+                />
+              )}
               <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
                 {(organization.name || "")
                   .split(" ")

src/components/organization/OrganizationMembers.tsx

@@ -89,10 +89,12 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
             <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
-                  <AvatarImage
-                    src={`https://github.com/${member.github_username}.png`}
-                    alt={`${member.github_username} avatar`}
-                  />
+                  {member.github_username && (
+                    <AvatarImage
+                      src={`https://github.com/${member.github_username}.png`}
+                      alt={`${member.github_username} avatar`}
+                    />
+                  )}
                   <AvatarFallback className="text-sm font-medium">
                     {member.github_username
                       .split(" ")

src/pages/organization-settings.tsx

@@ -468,10 +468,12 @@ export default function OrganizationSettingsPage() {
                           className="flex items-center gap-4 group cursor-pointer flex-1 min-w-0"
                         >
                           <Avatar className="h-12 w-12 border-2 border-gray-200 shadow-sm">
-                            <AvatarImage
-                              src={`https://github.com/${member.github_username}.png`}
-                              alt={`${member.github_username} avatar`}
-                            />
+                            {member.github_username && (
+                              <AvatarImage
+                                src={`https://github.com/${member.github_username}.png`}
+                                alt={`${member.github_username} avatar`}
+                              />
+                            )}
                             <AvatarFallback className="text-sm bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 font-medium">
                               {(
                                 member.github_username ||

src/pages/user-profile.tsx

@@ -153,10 +153,12 @@ export const UserProfilePage = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="flex items-center gap-4 mb-6">
           <Avatar className="h-16 w-16">
-            <AvatarImage
-              src={`https://github.com/${githubUsername}.png`}
-              draggable={false}
-            />
+            {githubUsername && (
+              <AvatarImage
+                src={`https://github.com/${githubUsername}.png`}
+                draggable={false}
+              />
+            )}
             <AvatarFallback className="select-none">
               {githubUsername?.[0]?.toUpperCase()}
             </AvatarFallback>