fix: handle loading states for project details for a single project

[thomasheartman]

This PR updates the use of references on the project details page to handle the loading state for a single project.

Now, if a project is loading, it'll show skeleton loaders for the relevant boxes:

I've also updated the state type we use for this to be more accurate. However, it feels like it's getting kinda messy they way we handle it now. I wouldn't mind refactoring the output of the hook into something more like this data type to make handling more explicit. (Shamelessly stolen from Elm, but iykyk)

type RemoteData<T> = 
  | { state: 'error', error: Error } 
  | { state: 'loading' } 
  | { state: 'success', data: T } 

Also, I had some issues with applying the data-loading attribute to components, where it seemed to work in some cases, but not in others. For instance, for DataError and ContactAdmins, it didn't work just setting data-loading on the component invocation in MyProjects, so I wrapped them both in data-loading divs instead. But happy to hear if there's a trick I missed.

After refactoring:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
unleash-monorepo-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 0:13am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
unleash-docs	⬜️ Ignored (Inspect)	Visit Preview		Oct 21, 2024 0:13am

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

OpenSSF Scorecard

Package	Version	Score	Details

Scanned Manifest Files

[kwasniew]

I wanted to combine state specific data myself when it starts to hurt me. If you feel like we're at this stage and you can timebox it to a resonable timeframe then why not. Otherwise I'd clean it up with the next major change in this area. I've shifted data-loading myself a few time it didn't work as expected :)