[MRKT-209][refactor](artist): Remove black gap on artist page with no banner.

[ITurres]

Pull Request — Issue MRKT-209

Overview

This PR fixes the artist page layout when no banner image is available. It conditionally renders the banner, ensures the banner skeleton shows while loading, switches ProfileHeader to an inline layout when no banner (or not loading), and adjusts margins to remove the black gap while preserving the overlay layout when a banner exists.

---

Files Summary

Total Changes: 2 files

Added (0)

• None

Modified (2)

• apps/marketplace/src/app/artist/[artistId]/page.tsx
  • Show banner area while loading or when a URL exists: const showBannerArea = isLoading || !!artistBannerUrl.
  • Render BannerImage when showBannerArea is true to display the skeleton during loading.
  • Derive profileHeaderLayout from showBannerArea (overlay when true, inline otherwise).
  • Apply Container marginTop based on showBannerArea to remove the black gap.
• packages/components/src/lib/ProfileHeader.tsx
  • Add optional layout?: "overlay" | "inline" prop (default: "overlay").
  • Use isOverlay to adjust top margins to match layout.
  • Tweak Socials container margin to account for layout and breakpoint.

Deleted (0)

• None

---

Impact

• Removes the unwanted black gap on artist pages without a banner.
• Preserves existing overlay appearance for artists with banners.
• Shows banner skeleton during loading for a smoother perceived load.
• Backward compatible: ProfileHeader defaults to layout="overlay".

---

Testing

• Manual QA in Marketplace:
  • With banner: header overlays banner; spacing unchanged.
  • Without banner: header inline; no black gap; spacing correct across breakpoints.
  • While loading: banner skeleton renders; layout uses overlay until data resolves.
• Verified responsive behavior near the md breakpoint.

---

Related Issues

• Closes MRKT-209

---

Dependencies

• No new or updated dependencies.

---

Demo

MRKT-209-Artist-page-with-no-banner-has-awkward-black-gap.mp4

---

Additional Notes

• The layout prop on ProfileHeader supports future non-overlay contexts.
• ⚠️ On Mobile (artist with no banner): There is a bit of a gap between the profile header and the search bar. Doesn't look bad, but its a preference thing. We could use the useBetterMediaQuery hook to conditionally apply a different margin-top. TO BE CHECKED

[github-actions]

Visit the studio preview URL for this PR 🚀 : https://925.artist.preview.newm.io/

[github-actions]

Visit the tools preview URL for this PR (updated for commit 5aecd79):
🚀 https://jlmpoatswlyg5imgqcq7hxrbiu0hgrwn.lambda-url.us-west-2.on.aws/

[github-actions]

Visit the wallet preview URL for this PR (updated for commit 5aecd79):
🚀 https://urot5ixfgnmlgjmhagwo44pua40vuuhh.lambda-url.us-west-2.on.aws/

[github-actions]

Visit the marketplace preview URL for this PR (updated for commit 5aecd79):
🚀 https://2tubmofk2jxzpjhzxpw36dgpvy0pgayf.lambda-url.us-west-2.on.aws/

[dmkirshon]

Looks good overall. Just a single inquiry and should be good to merge after it's resolved!

[github-actions]

Visit the tools preview URL for this PR (updated for commit 3a9ebfa):
🚀 https://jlmpoatswlyg5imgqcq7hxrbiu0hgrwn.lambda-url.us-west-2.on.aws/

[github-actions]

Visit the marketplace preview URL for this PR (updated for commit 3a9ebfa):
🚀 https://2tubmofk2jxzpjhzxpw36dgpvy0pgayf.lambda-url.us-west-2.on.aws/

[github-actions]

Visit the wallet preview URL for this PR (updated for commit 3a9ebfa):
🚀 https://urot5ixfgnmlgjmhagwo44pua40vuuhh.lambda-url.us-west-2.on.aws/

[dmkirshon]

Looks good now, thank you for the small update.