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

9
apps/web/core/components/profile/form.tsx
View file

@ -20,8 +20,9 @@ import { DeactivateAccountModal } from "@/components/account/deactivate-account-
import { ImagePickerPopover } from "@/components/core/image-picker-popover";
import { ChangeEmailModal } from "@/components/core/modals/change-email-modal";
import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
import { CoverImage } from "@/components/common/cover-image";
// helpers
import { DEFAULT_COVER_IMAGE_URL, getCoverImageDisplayURL, handleCoverImageChange } from "@/helpers/cover-image.helper";
import { handleCoverImageChange } from "@/helpers/cover-image.helper";
import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
// hooks
import { useInstance } from "@/hooks/store/use-instance";
@ -210,9 +211,9 @@ export const ProfileForm = observer(function ProfileForm(props: TProfileFormProp
<form onSubmit={handleSubmit(onSubmit)} className="w-full">
<div className="flex w-full flex-col gap-6">
<div className="relative h-44 w-full">
<img
src={getCoverImageDisplayURL(userCover, DEFAULT_COVER_IMAGE_URL)}
className="h-44 w-full rounded-lg object-cover"
<CoverImage
src={userCover}
className="h-44 w-full rounded-lg"
alt={currentUser?.first_name ?? "Cover image"}
/>
<div className="absolute -bottom-6 left-6 flex items-end justify-between">

14
apps/web/core/components/profile/sidebar.tsx
View file

@ -17,8 +17,8 @@ import type { IUserProfileProjectSegregation } from "@plane/types";
// plane ui
import { Loader } from "@plane/ui";
import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
// helpers
import { getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
// components
import { CoverImage } from "@/components/common/cover-image";
// hooks
import { useAppTheme } from "@/hooks/store/use-app-theme";
import { useProject } from "@/hooks/store/use-project";
@ -101,13 +101,11 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
</Link>
</div>
)}
<img
src={
getCoverImageDisplayURL(userData?.cover_image_url, "/users/user-profile-cover-default-img.png") ||
"/users/user-profile-cover-default-img.png"
}
<CoverImage
src={userData?.cover_image_url ?? undefined}
alt={userData?.display_name}
className="h-[110px] w-full object-cover"
className="h-[110px] w-full"
showDefaultWhenEmpty
/>
<div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded-sm">
{userData?.avatar_url && userData?.avatar_url !== "" ? (