fix(ui): improve MarketplacePage loading skeleton parity

[Oyinkans0la12]

Closes #417

Summary

Improve the MarketplacePage loading skeleton to closely match the final rendered interface, reducing layout shift and providing a more polished loading experience across all supported breakpoints.

Problem

The current MarketplacePage skeleton does not fully mirror the structure and dimensions of the loaded UI. Differences in placeholder sizing, spacing, and layout can introduce unnecessary visual shifts during loading and create an inconsistent user experience.

Solution

This PR refines the loading skeleton to better reflect the final MarketplacePage layout while preserving responsiveness, accessibility, dark-mode support, and design-system consistency.

Implementation Details

Skeleton Improvements

Updated the MarketplacePage loading state to better match the rendered page by aligning:

• overall layout
• content hierarchy
• card dimensions
• image placeholders
• text placeholder widths
• action/button placeholders
• spacing and alignment
• responsive grid behavior

The changes are intended to minimize cumulative layout shift (CLS) and create a smoother transition from loading to loaded content.

Design Consistency

• Reused existing Skeleton components where appropriate.
• Preserved design-token usage.
• Verified dark-mode compatibility.
• Maintained consistent border radius, spacing, and sizing with the final UI.

Accessibility

Verified that the loading state:

• remains WCAG 2.1 AA compliant,
• avoids unnecessary announcements by assistive technologies,
• preserves semantic structure where applicable.

Testing

Added focused tests covering:

• MarketplacePage loading state rendering.
• Skeleton structure and layout.
• Loading-to-content transition.
• Responsive behavior where applicable.
• Visual regressions related to the skeleton.

API Changes

None.

This PR is limited to loading-state UI improvements and introduces no functional or API changes.

Validation

• Tests passing.
• Lint passing.
• Responsive layouts verified.
• Dark mode verified.
• No functional regressions.
• Accessibility reviewed.

Checklist

• Improved MarketplacePage skeleton parity.
• Preserved responsive layouts.
• Maintained design-token consistency.
• Maintained dark-mode support.
• Added focused tests.
• Ready for review.

[drips-wave]

@Oyinkans0la12 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits