binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5779] fix: handle loading state while fetching project cover image (#8419)

Browse source 
* refactor: replace cover image handling with CoverImage component across profile and project forms

* fix: extend CoverImage component to accept additional img props

* Update apps/web/core/components/common/cover-image.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: handle undefined cover image URL in ProfileSidebar component

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Jayash Tripathy 2025-12-24 19:30:01 +05:30 • committed by GitHub
parent 59f26a80bb
commit 39728d4cc4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 68 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

44
apps/web/core/components/common/cover-image.tsx Normal file
View file

@ -0,0 +1,44 @@
import { cn } from "@plane/utils";
// helpers
import { getCoverImageDisplayURL, DEFAULT_COVER_IMAGE_URL } from "@/helpers/cover-image.helper";
type TCoverImageProps = {
/** The cover image URL - can be static, uploaded, or external */
src: string | null | undefined;
/** Alt text for the image */
alt?: string;
/** Additional className for the image or skeleton */
className?: string;
/** Whether to show default image when src is null/undefined. If false, shows loading skeleton */
showDefaultWhenEmpty?: boolean;
/** Custom fallback URL to use instead of DEFAULT_COVER_IMAGE_URL */
fallbackUrl?: string;
} & React.ComponentProps<"img">;
/**
* A reusable cover image component that handles:
* - Loading states with skeleton
* - Static images (local assets)
* - Uploaded images (processed through getFileURL)
* - External URLs
* - Fallback to default cover image
*/
export function CoverImage(props: TCoverImageProps) {
const {
src,
alt = "Cover image",
className,
showDefaultWhenEmpty = false,
fallbackUrl = DEFAULT_COVER_IMAGE_URL,
...restProps
} = props;
// Show loading skeleton when src is undefined/null and we don't want to show default
if (!src && !showDefaultWhenEmpty) {
return <div className={cn("bg-layer-2 animate-pulse", className)} />;
}
const displayUrl = getCoverImageDisplayURL(src, fallbackUrl);
return <img src={displayUrl} alt={alt} className={cn("object-cover", className)} {...restProps} />;
}