Ken implement report page card spinners

[kzou55]

Description

Implemented loading spinners for the Projects, People, and Teams cards on the Reports page so users receive visual feedback while the corresponding data is being fetched. Updated the Teams data fetch to properly track its loading state and adjusted the shared loading component and card styling to support the new spinners, including in dark mode.

Related PRS (if any):

This PR replaces the previous PR #4109 associated with this task.

Main changes explained:

• Update src/components/Reports/Reports.jsx to display loading spinners in the Projects, People, and Teams cards while their respective data is being fetched, and pass a custom container class to ensure the spinner background remains transparent within the cards.
• Update src/components/Reports/reportsPage.module.css to add styling for the card spinner container, ensuring its background is transparent when displayed inside the report cards.
• Update src/components/common/Loading/Loading.jsx to accept a containerClassName prop, allowing the spinner container to receive custom styling.
• Update src/actions/allTeamsAction.js to dispatch FETCH_USER_TEAMS_START before fetching all teams so the Redux fetching state is properly set while the Teams data is loading.
• Update src/actions/__tests__/allTeamsAction.js.test.js to account for the new FETCH_USER_TEAMS_START action in the expected dispatched actions.
• Update src/components/UserProfile/TeamsAndProjects/__tests__/AddTeamPopup.test.jsx to account for the new FETCH_USER_TEAMS_START action in the expected dispatched actions.

How to test:

1. Check out the current branch.
2. Run npm install and npm run start:local to run this PR locally, and also run the backend development repository.
3. Run npm test to verify that all tests pass.
4. Clear the site's data/cache.
5. Log in as an admin user.
6. Go to the Dashboard → click Reports in the navigation bar → click Reports in the dropdown menu.
7. Verify that the three cards (Projects, People, and Teams) are displayed.
8. Verify that each card displays its own loading spinner while its data is being loaded.
9. Verify that the new feature works correctly in dark mode and that the loading spinner's background is transparent and matches the card's background.

Screenshots or videos of changes:

• Before

Recording.2026-09-08.204247.mp4

• After

Recording.2026-09-08.201943.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	bd2b9bf
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aa1cc6c10196d000807b88e
😎 Deploy Preview	https://deploy-preview-5518--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[devangsaraogi]

Hi @kzou55,

Tested the current PR locally on the Reports page as an Admin. Tested both light and dark modes.

Verified that the Projects, People and Teams cards each display their own loading spinner while data is being fetched. And that the spinners are replaced by the correct card values once loading completes (I tested this with network throttling enabled to make the loading states visible).

The spinner containers remain transparent and visually match the report cards. After loading completed, the Projects, People and Teams cards remained clickable and opened their expected report views.

I ran the two unit test files updated by this PR as well. Both test files passed successfully with 24 tests passing and 2 existing skipped tests.

The Volunteer account redirects away from this Reports page. Testing for this PR was performed with the Administrator account as specified in the PR instructions.

No blocking issues found. Approved!

[iAbhi001]

Hi @kzou55,

Tested this PR locally with an Administrator account alongside the backend running locally.

Verification Details:

• Card Spinners & Loading State: Enabled network throttling in DevTools to inspect in-flight requests. Verified that the Projects, People, and Teams cards each cleanly display their own independent loading spinner while fetching data.
• Styling & Theming: Confirmed the spinner container background remains completely transparent and blends properly across both light and dark modes without visual artifacts.
• Post-Load Functionality: Once requests resolve, the spinners are replaced by the correct data counts, and all three cards remain fully interactive and route to their respective report drill-downs.
• Unit Tests: Ran the updated test suites (allTeamsAction.js.test.js and AddTeamPopup.test.jsx). All 24 tests passed cleanly with the 2 existing skipped tests.
• Access Control: Confirmed standard behavior where non-admin (Volunteer) roles redirect away, while Admin access displays the cards as intended.

Everything functions smoothly with no regressions observed. Approved!

[muthapriyanka]

Tested PR #5518 locally and the spinners for the given 3 cards works correctly in both light and dark mode.

[sundarmachani]

Reviewed this change, and it effectively addresses the issue from the previous iteration. For instance, it adds a proper spinner for the Projects, People, and Teams sections when the page loads. It also works well on dark mode. Overall, it looks good to me.

[DeepighaJ]

• Tested locally. Verified the Projects, People, and Teams cards and confirmed that each card displays its loading spinner while data is loading.
• Verified the spinner styling in dark mode and confirmed the card background remains visually consistent.
• No issues observed.
• Tested the modified unit tests locally. All passed.

[MahalakshmiPFW]

Hey Ken! Tested and verified the changes locally in both light and dark modes:

Card Spinners: Verified that all three category cards (Projects, People, and Teams) display their individual loading spinners while fetching data.

Dark Mode & Styling: Confirmed that the new feature works seamlessly in dark mode and that the spinner background (card-spinner) remains transparent, cleanly matching the card's background color without visual artifacts.

Functionality: Confirmed all cards render their respective data counts properly once loading completes.

All Tests passed too! Great Work. Approved!

[AnshShah-18]

Tested locally. Verified the Projects, People, and Teams cards display loading feedback while their data is being fetched and load their counts correctly afterward. Also verified the Reports page and card styling work correctly in both light and dark modes.

Everything I tested worked as expected. Approving this PR.

[HemanthVarupula]

I reviewed the pr#5518 locally as an admin

The spinner loads for all the three cards , while loading