Ensures project placeholders align with projects

[simonbs]

Fixes visual alignment issues between project skeletons and actual projects.

Key changes:

1. Introduced SpacedList: Ensures consistent spacing between items, aligning skeletons with actual projects.
2. Merged Placeholder into ProjectListItem: Removed ProjectListItemPlaceholder*, consolidating its content into ProjectListItem to avoid updates being missed between the two.
3. Refactored for Consistency: Renamed ProjectListItemPlaceholder to Skeleton and introduced a Template component for consistent layout between the item and its skeleton.

[mpabarca]

I've been reviewing our site's handling of UI loading and skeletons. Typically, modern Next.js projects use Suspense or built-in features for managing loading states, as recommended here.

While using isLoading from SWR is effective, I’ve noticed that our current approach leads to a delay in showing the loading or skeleton screens when navigating through the website. This delay can make it seem like nothing is happening when users interact with the site, which could affect user experience. However, this may not be directly related to the use of this library.

So the solution in this PR may not address this issue directly, we could improve by ensuring consistent loading state handling across the site in the future. This would enhance both performance and user experience, even for our internal project.

For example, Airbnb handles transitions smoothly by showing immediate feedback (like skeletons) during navigation, ensuring users know something is happening.

[simonbs]

@mpabarca I would LOVE if we can go in that direction! I looked into using Suspense in the early days of the project but didn't grasp how we could best take advantage of it.

Can we proceed with the changes in this PR as they seem to improve on our current solution and then setup a discussion about how we can move to using Suspense?