Skip to content

fix: Add loading placeholder for resource card category labels - #170

Merged
michelle-hadfield-nava merged 2 commits into
mainfrom
rh/remove-button-fix
Jan 29, 2026
Merged

fix: Add loading placeholder for resource card category labels#170
michelle-hadfield-nava merged 2 commits into
mainfrom
rh/remove-button-fix

Conversation

@RyanHansz

@RyanHansz RyanHansz commented Jan 29, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds loading placeholder state for resource cards during streaming
  • Prevents Remove button from colliding with card header when referral_type hasn't been set yet
  • Shows gray top border and animated skeleton for category label while loading

Problem

During streaming, resources may not have referral_type set yet, causing:

  • No top border to be rendered
  • No category label to be rendered
  • Remove button positioned at the very top, colliding with "Resources" header

Solution

Added default cases in both functions:

  • getCardBorderClass: Returns gray border (border-t-gray-300) while loading
  • referralTypeIndicator: Returns animated skeleton placeholder with pulse animation

Test plan

  • Start a search and observe resource cards as they stream in
  • Verify cards show gray top border and skeleton category before type is known
  • Verify Remove button has proper spacing from card top
  • Verify final card appearance matches before (blue/gray/green border based on type)

🤖 Generated with Claude Code

Preview environment for app

♻️ Environment destroyed ♻️

Preview environment for frontend

Ryan Hansz and others added 2 commits January 29, 2026 10:05
During streaming, resources may not have referral_type set yet. This
caused the Remove button to collide with the card header because:
- No top border was rendered
- No category label was rendered

Added:
- Gray placeholder border (border-t-gray-300) while loading
- Animated placeholder for category label with pulse animation

This maintains consistent spacing before/after streaming completes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…al type

The test expected empty string for undefined referral_type but the fix
now returns a gray loading state border to maintain spacing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Coverage report for frontend

St.
Category Percentage Covered / Total
🔴 Statements
48.73% (-0.05% 🔻)
498/1022
🔴 Branches 47.69% 196/411
🟡 Functions 63.51% 94/148
🔴 Lines
48.51% (-0.05% 🔻)
472/973
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🟢
... / ResourcesList.tsx
97.22% (-0.08% 🔻)
96.97% 100%
97.06% (-0.08% 🔻)

Test suite run success

95 tests passing in 8 suites.

Report generated by 🧪jest coverage report action from f094be2

@michelle-hadfield-nava
michelle-hadfield-nava merged commit e05a80a into main Jan 29, 2026
16 of 17 checks passed
@michelle-hadfield-nava
michelle-hadfield-nava deleted the rh/remove-button-fix branch January 29, 2026 17:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants