Biraj mariam/skeleton

[bp289]

Changes made:

• Added loading page and replicated styling for each component.
• new prop in relation card referencing a function which changes the isLoading state, allowing us to show a loading skeleton when a relation card is clicked.
• Jest tests added for Skeleton.
• Started with cypress tests, current tests check for the loading skeleton appearing on all viewports.
• Added cypress tests for testing that the loading skeleton appears while loading data.
• Testing responsive design for the loading skeleton.

note the test for the loading screen tests that the loading screen is present when there is no data being given from a database, this is suitable here as we are not running the database or the react app on github actions.

• if we were to these resources would be useful:

https://blog.dai.codes/cypress-loading-state-tests/

https://docs.cypress.io/api/commands/visit

[netlify[bot]]

✅ Deploy Preview for explain-ai ready!

Name	Link
🔨 Latest commit	b3a746eb668d88b74aa579a98e9b470cc38b1f19
🔍 Latest deploy log	https://app.netlify.com/sites/explain-ai/deploys/641196fe0682e500084d93d3
😎 Deploy Preview	https://deploy-preview-111--explain-ai.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[DomVinyard]

The code on this looks good, would reviewers make sure to pull the branch and test it (on both desktop and mobile) - once we have two approving reviews, happy to merge 👍