Add loading status to site settings data related dropdown

[erinz2020]

in some environments, the site-settings response can be slow, causing certain dropdowns to briefly render with empty options. this PR adds loading spinners to the affected selects on the Encounter and Search Encounter pages to clearly indicate the options are still loading and avoid confusion

PR fixes #1443

[codecov-commenter]

Codecov Report

❌ Patch coverage is 52.98013% with 71 lines in your changes missing coverage. Please review.
✅ Project coverage is 46.91%. Comparing base (5dcae11) to head (78b54cc).
⚠️ Report is 70 commits behind head on main.

Files with missing lines	Patch %	Lines
frontend/src/pages/Encounter/MatchCriteria.jsx	37.50%	18 Missing and 2 partials ⚠️
...ntend/src/components/filterFields/SocialFilter.jsx	57.14%	9 Missing ⚠️
frontend/src/pages/Encounter/ProjectsCard.jsx	12.50%	7 Missing ⚠️
...tend/src/pages/Encounter/AttributesSectionEdit.jsx	73.91%	6 Missing ⚠️
frontend/src/pages/Encounter/Encounter.jsx	45.45%	6 Missing ⚠️
...d/src/components/filterFields/ImageLabelFilter.jsx	54.54%	5 Missing ⚠️
...ntend/src/pages/Encounter/stores/EncounterStore.js	20.00%	4 Missing ⚠️
...src/pages/SearchPages/stores/EncounterFormStore.js	20.00%	4 Missing ⚠️
frontend/src/components/ContainerWithSpinner.jsx	66.66%	1 Missing and 1 partial ⚠️
frontend/src/components/DataTable.jsx	0.00%	2 Missing ⚠️
... and 4 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1446      +/-   ##
==========================================
- Coverage   47.21%   46.91%   -0.30%     
==========================================
  Files         272      274       +2     
  Lines        9720     9783      +63     
  Branches     2862     2895      +33     
==========================================
+ Hits         4589     4590       +1     
- Misses       4900     4959      +59     
- Partials      231      234       +3     

Flag	Coverage Δ
backend	46.91% <52.98%> (-0.30%)	⬇️
frontend	46.91% <52.98%> (-0.30%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vkirkl]

Do we know why the site-settings response is slow? Can we address that as well?

[JasonWildMe]

LGTM

[erinz2020]

Do we know why the site-settings response is slow? Can we address that as well?

it might be related to both frontend and backend. in another branch I have some updates on reducing calls of site-settings, once that got merged, I'll updated related pages to use context provider instead of making new calls every page

[erinz2020]

@claude

[claude]

Claude finished @erinz2020's task in 1m 38s —— View job

---

PR Review

I've completed a review of this PR that adds loading spinners to site settings-dependent dropdowns.

Todo List

• Read repository guidelines (CLAUDE.md)
• Review new components (ContainerWithSpinner, SmallSpinner)
• Review key modified files
• Analyze implementation approach
• Provide feedback and recommendations

---

Summary

This PR successfully addresses the issue where slow site-settings responses cause dropdowns to briefly render with empty options. The solution adds loading spinners to affected selects on the Encounter and Search Encounter pages, providing clear visual feedback that options are still loading.

Implementation Review

New Components:

1. SmallSpinner.jsx - Clean, simple spinner component using react-bootstrap's Spinner with appropriate accessibility attributes (role="status", aria-label="loading").

2. ContainerWithSpinner.jsx - Wrapper component that positions a spinner in the bottom-right corner while loading. Uses relative positioning with appropriate padding to prevent layout shift.

Store Changes:

Both EncounterStore.js and EncounterFormStore.js now include:

• _siteSettingsLoading state (initialized to true)
• Getter/setter methods for the loading state

This is a good pattern that allows components to reactively update when site settings finish loading.

Component Integration:

The implementation wraps affected dropdowns with ContainerWithSpinner, passing store.siteSettingsLoading as the loading prop. The pattern is consistent across:

• Encounter page components (AttributesSectionEdit, ProjectsCard, LocationSectionEdit, MatchCriteria, etc.)
• Search page filter fields (ImageLabelFilter, SocialFilter, MetadataFilter, etc.)

Strengths

1. Consistent pattern - The solution uses a uniform approach across all affected components
2. Good UX - Loading spinners prevent confusion when options are temporarily empty
3. Accessibility - The SmallSpinner includes proper ARIA attributes
4. Minimal layout shift - ContainerWithSpinner adds padding to maintain layout during loading
5. Clean component design - Both new components are focused and reusable

Observations & Suggestions

1. Code coverage - The codecov report shows 52.98% patch coverage with 71 lines missing coverage. While this is expected for UI components that are harder to test, consider adding tests for:

   • The new siteSettingsLoading state management in stores
   • The ContainerWithSpinner component's conditional rendering logic

2. Loading state initialization - The stores initialize _siteSettingsLoading = true, which is correct. However, I notice that DataTable.jsx (lines 224-231) fetches site settings but the loading state management happens in the component. Make sure this pattern is consistent across all places where site settings are fetched.

3. Minor inconsistency - In FormGroupMultiSelect.jsx:19-29, the component shows a "Loading…" option while loading. This is good, but it's slightly different from components that just disable the select. Both approaches work, but consider whether you want consistency.

4. ContainerWithSpinner positioning - The spinner is positioned at bottom: 8, right: 8. For very short dropdowns, this might overlap with content. Consider if you need any z-index handling or if the current approach works well for all your use cases.

5. Performance consideration - As noted in the PR discussion, there's a plan to reduce site-settings calls by using a context provider. That's a great next step and will complement these UI improvements nicely.

Minor Issues

MatchCriteria.jsx - This file appears to have the most lines missing coverage (18 missing + 2 partials). Consider reviewing the conditional logic in this file.

GroupRole field (AttributesSectionEdit.jsx:58-62) - I notice the "GROUP_ROLE" field is a TextInput, not wrapped in ContainerWithSpinner, while other fields like "BEHAVIOR" are. Is this intentional? If groupRole should also be populated from site settings, it should probably be wrapped as well.

Verdict

This is a solid PR that addresses a real UX issue with a clean, consistent solution. The implementation is straightforward and follows React best practices. The main areas for improvement are around test coverage and ensuring complete consistency in which fields are wrapped with the loading spinner.

The PR is ready to merge from a code quality perspective. The 47% → 46.91% coverage decrease is minimal and expected for UI-focused changes.

---

|