[WEB-5779] fix: handle loading state while fetching project cover image

[JayashTripathy]

Description

This PR fixes an issue where the default cover image was shown as a fallback while the actual cover image was still loading.

Type of Change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] Feature (non-breaking change which adds functionality)
• [x] Improvement (change that would cause existing functionality to not work as expected)
• [ ] Code refactoring
• [ ] Performance improvements
• [ ] Documentation update

Summary by CodeRabbit

• New Features

  • Added a reusable cover image component with built-in fallback/default handling and a loading skeleton for missing images.

• Refactor

  • Replaced inline cover image markup across profiles, projects, cards, and forms with the centralized component for consistent display and styling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Adds a new reusable React component CoverImage and replaces inline cover image rendering in several profile and project components to use this component instead of manual URL helpers.

Changes

Cohort / File(s)	Summary
New CoverImage component apps/web/core/components/common/cover-image.tsx	Adds CoverImage export and TCoverImageProps (extends img props). Handles empty-src loading skeleton, computes display URL via getCoverImageDisplayURL(...) (with DEFAULT_COVER_IMAGE_URL fallback), and renders an img with merged props and object-fit styling.
Profile components apps/web/core/components/profile/form.tsx, apps/web/core/components/profile/sidebar.tsx	Replaces inline img + getCoverImageDisplayURL usage with <CoverImage src={...} ... />; removes direct imports of getCoverImageDisplayURL and DEFAULT_COVER_IMAGE_URL.
Project components apps/web/core/components/project/card.tsx, apps/web/core/components/project/create/header.tsx, apps/web/core/components/project/form.tsx	Replaces inline img usage and helper calls with CoverImage, passing raw cover_image_url and relying on component-level fallback/behavior; removes getCoverImageDisplayURL and DEFAULT_COVER_IMAGE_URL dependencies.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I stitched a cover, neat and true,
One component hopped into view.
No scattered tags or URL chase,
A tidy image in its place.
Hooray — a cleaner, happier space! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: introducing a new CoverImage component to handle loading states for project cover images across multiple components.
Description check	✅ Passed	The description provides a clear problem statement and the type of change is marked. However, it lacks details about the solution implementation, test scenarios, and references to related issues.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch fix/project-default-cover-image

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bac52b5897d11818cae94738c61c6dc1a2576c0f and b0460b58fde3294eb956ba5ad28dd2f892a51260.

📒 Files selected for processing (1)

• apps/web/core/components/profile/sidebar.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/core/components/profile/sidebar.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build packages
• GitHub Check: Analyze (javascript)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[makeplane[bot]]

Linked to Plane Work Item(s)

• [WEB-5779] Handle loading state while fetching project cover image

This comment was auto-generated by Plane