Loading Component Coordinator Dashboard

johnwroge commented 3 weeks ago

Closes #669

What changes did you make?

Created a loading component that renders based on a timer.
Added the loading component and styling to the overlay option for the StyledDataGrid.
Updated height style on the StyledDataGrid because of the default to close when there are no rows.

Rationale behind the changes?

A loading spinner is needed for coordinator dashboard to act as a placeholder in the place of data based on the time it takes to fetch coordinator dashboard data from the backend. The counts in the styled tabs were not changed because they are not connected to any loading state yet. This will need to be updated when the backend is connected.

I ran into git issues when trying to add the changes to my branch due to the linter preventing any warnings. To solve the warnings I commented out two of the unused components in the Header component and additional imports. These changes to the Header file can probably be removed in this PR and I'll bring the linter problems up in our next meeting - there may be a way to resolve this without having to comment out those components.

I updated the Node version and merged with main which removed the comments in the Header.tsx file previously needed to commit. The tests are now passing, and I think this was caused by a local change on my device with Node or VS Code.

Testing done for these changes

Tests were run in the app directory and 3 failed initially in the guest invite button tests forgot password code test. After changing Node to v20 from v21, and merging with the main branch, all the tests passed.
E2E tests passed with no errors in Cypress.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

https://github.com/hackforla/HomeUniteUs/assets/72668920/986b8522-a715-40e5-96fa-17f3379f608d

JpadillaCoding commented 2 weeks ago

Hey John! Took a look at the problem you're having with the test. To recreate I ran npm test in the app directory. The results I found is that main is passing all the tests on my system and I was able to get your branch to pass by pulling from main. This removes the container variable and removes the commented lines of code. I'm wondering why your system is showing unused imports and components while showing them as used on mine. Sometimes the linter and vscode get out of sync and vscode needs to be closed/reset- have you tried that?

johnwroge commented 2 weeks ago

Hi @JpadillaCoding

Thanks for looking into this. The issue may have had to do with vs code and the linter not being in sync, I tried restarting but didn't notice anything different. I was also using an unsupported version of Node too which may have caused the testing problems. After switching to Node v.20, the errors went away. I merged with main and this removed the commented out imports and the tests are passing. It's odd, I'll have to look into why these linter errors are occurring on my device and not others.

hackforla / HomeUniteUs