Fix: Blank Screen

[kellyel]

Proposed changes

I believe this will fix the issue of the games tabs not appearing after each game. Fixes: https://github.com/yeatmanlab/roar/issues/281

Types of changes

What types of changes does this pull request introduce?

• [x] Bugfix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Refactoring (non-breaking change that does not add functionality but makes code cleaner or more efficient)
• [ ] Documentation Update
• [ ] Tests (new or updated tests)
• [ ] Style (changes to code styling)
• [ ] CI (continuous integration changes)
• [ ] Repository Maintenance
• [ ] Other (please describe below)

Checklist

• [x] I have read the guidelines for contributing.
• [x] The changes in this PR are as small as they can be. They represent one and only one fix or enhancement.
• [x] Linting checks pass with my changes.
• [x] Any existing unit tests pass with my changes.
• [x] Any existing end-to-end tests pass with my changes.
• [x] I have added tests that prove my fix is effective or that my feature works.
• [x] If this PR fixes an existing issue, I have added a unit or end-to-end test that will detect if this issue reoccurs.
• [x] I have added JSDoc comments as appropriate.
• [x] I have added the necessary documentation to the roar-docs repository.
• [x] I have shared this PR on the roar-pr-reviews channel (if I have access)
• [x] I have linked relevant issues (if any)

Justification of missing checklist items

Further comments

I understand that this change was originally made to decrease the package size of the app. However I feel that in this case, it is better to reverse the change to prevent this issue from occurring.

My theory as to what is happening is as follows. Those two components are being imported on the onMounted hook. Vue tries to reuse components whenever possible, thus will not call the onMounted hook in every case [1]. There seem to be some cases where when the user navigates back to a page, the onMounted hook is not fired. This is supported by the fact that in all cases we have evidence of, those two components are the only ones missing with no other apparent errors.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit ebd8fe4):

https://roar-staging--pr645-fix-blank-screen-apgbolsk.web.app

_{(expires Thu, 13 Jun 2024 16:19:40 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2631e9c58fd0104ecbfddd72a62245ddac467460}

ROAR

[cypress[bot]]

Passing run #2373 ↗︎

0

26

0

0

0

Details:

Tests for PR 645 "Fix: Blank Screen " from commit "ebd8fe4b985f8e312b794376398f2...
Project: roar-dashboard-e2e	Commit: ebd8fe4b98
Status: Passed	Duration: 06:20 💡
Started: Jun 6, 2024 4:50 PM	Ended: Jun 6, 2024 4:57 PM

Review all test suite changes for PR #645 ↗︎

[sentry-io[bot]]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ TypeError: userData.value.studentData is undefined checkConsent(src/pages/HomeParticipant) View Issue

_{Did you find this useful? React with a 👍 or 👎}