diff --git a/src/common/ui/SpacedList.tsx b/src/common/ui/SpacedList.tsx
new file mode 100644
index 00000000..799af698
--- /dev/null
+++ b/src/common/ui/SpacedList.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import { List, Box } from "@mui/material"
+
+const SpacedList = ({
+  children,
+  itemSpacing
+}: {
+  children: React.ReactNode
+  itemSpacing: number
+}) => {
+  return (
+    <List disablePadding sx={{ margin: 0 }}>
+      {React.Children.map(children, (child, idx) => (
+        <Box sx={{
+          marginBottom: idx < React.Children.count(children) - 1 ? itemSpacing : 0
+        }}>
+          {child}
+        </Box>
+      ))}
+    </List>
+  )
+}
+
+export default SpacedList
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
index d96def6b..87ea22e9 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
@@ -1,34 +1,36 @@
 import { useContext } from "react"
-import { List, Box, Typography } from "@mui/material"
+import { Box, Typography } from "@mui/material"
 import { ProjectsContainerContext } from "@/common"
+import SpacedList from "@/common/ui/SpacedList"
 import { useProjectSelection } from "@/features/projects/data"
-import ProjectListItem from "./ProjectListItem"
-import ProjectListItemPlaceholder from "./ProjectListItemPlaceholder"
+import ProjectListItem, { Skeleton as ProjectListItemSkeleton } from "./ProjectListItem"
 
 const ProjectList = () => {
   const { projects, isLoading } = useContext(ProjectsContainerContext)
   const projectSelection = useProjectSelection()
-  const loadingItemCount = 6
-  if (isLoading || projects.length > 0) {
+  const itemSpacing = 1
+  if (isLoading) {
     return (
-      <List disablePadding sx={{ margin: 0 }}>
-        {isLoading && 
-          [...new Array(loadingItemCount)].map((_, index) => (
-            <ProjectListItemPlaceholder key={index}/>
+      <SpacedList itemSpacing={itemSpacing}>
+        {
+          [...new Array(6)].map((_, idx) => (
+            <ProjectListItemSkeleton key={idx} />
           ))
         }
-        {!isLoading && projects.map((project, idx) => (
-          <Box key={project.id} sx={{
-            marginBottom: idx < projects.length - 1 ? 0.5 : 0
-          }}>
-            <ProjectListItem
-              project={project}
-              isSelected={project.id === projectSelection.project?.id}
-              onSelectProject={projectSelection.selectProject}
-            />
-          </Box>
+      </SpacedList>
+    )
+  } else if (projects.length > 0) {
+    return (
+      <SpacedList itemSpacing={itemSpacing}>
+        {projects.map(project => (
+          <ProjectListItem
+            key={project.id}
+            project={project}
+            selected={project.id === projectSelection.project?.id}
+            onSelect={() => projectSelection.selectProject(project)}
+          />
         ))}
-      </List>
+      </SpacedList>
     )
   } else {
     return (
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index ab238004..3e8e8989 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -1,67 +1,145 @@
 import {
   Box,
   ListItem,
-  ListItemButton,
   ListItemText,
+  ListItemButton,
+  Skeleton as MuiSkeleton,
   Stack,
   Typography
 } from "@mui/material"
 import MenuItemHover from "@/common/ui/MenuItemHover"
 import { Project } from "@/features/projects/domain"
 import ProjectAvatar from "./ProjectAvatar"
+import ProjectAvatarSquircle from "./ProjectAvatarSquircle"
+
+const AVATAR_SIZE = { width: 40, height: 40 }
 
 const ProjectListItem = ({
   project,
-  isSelected,
-  onSelectProject
+  selected,
+  onSelect
 }: {
   project: Project
-  isSelected: boolean
-  onSelectProject: (project: Project) => void
+  selected: boolean
+  onSelect: () => void
+}) => {
+  return (
+    <Template
+      selected={selected}
+      onSelect={onSelect}
+      avatar={
+        <ProjectAvatar
+          project={project}
+          width={AVATAR_SIZE.width}
+          height={AVATAR_SIZE.height}
+        />
+    }>
+      <ListItemText
+        primary={
+          <Typography
+            variant="body2"
+            style={{
+              fontWeight: selected ? 800 : 500,
+              letterSpacing: 0.1,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }}
+          >
+            {project.displayName}
+          </Typography>
+        }
+      /> 
+    </Template>
+  )
+}
+
+export default ProjectListItem
+
+export const Skeleton = () => {
+  return (
+    <Template disabled avatar={
+      <MuiSkeleton
+        variant="rectangular"
+        animation="wave"
+        sx={{ width: "100%", height: "100%" }}
+      />
+    }>
+      <MuiSkeleton variant="text" animation="wave" width={100} />
+    </Template>
+  )
+}
+
+const Template = ({
+  disabled,
+  selected,
+  onSelect,
+  avatar,
+  children
+}: {
+  disabled?: boolean
+  selected?: boolean
+  onSelect?: () => void
+  avatar: React.ReactNode
+  children?: React.ReactNode
 }) => {
   return (
     <ListItem disablePadding>
+      {disabled &&
+        <ButtonLabel disabled={disabled} avatar={avatar}>
+          {children}
+        </ButtonLabel>
+      }
+      {!disabled &&
       <ListItemButton
-        onClick={() => onSelectProject(project)}
-        selected={isSelected}
+        disabled={disabled}
+        onClick={onSelect}
+        selected={selected}
         disableGutters
         sx={{ padding: 0 }}
       >
-        <MenuItemHover
-          sx={{
-            ".avatar": {
-              transform: "scale(1)",
-              transition: "transform 0.3s ease-in-out"
-            },
-            "&:hover .avatar": {
-              transform: "scale(1.08)"
-            }
-          }}>
-          <Stack direction="row" alignItems="center" spacing={1.5}>
-            <Box className="avatar">
-              <ProjectAvatar project={project} width={40} height={40} />
-            </Box>
-            <ListItemText
-              primary={
-                <Typography
-                  variant="body2"
-                  style={{
-                    fontWeight: isSelected ? 800 : 500,
-                    letterSpacing: 0.1,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }}
-                >
-                  {project.displayName}
-                </Typography>
-              }
-            /> 
-          </Stack>
-        </MenuItemHover>
+        <ButtonLabel disabled={disabled} avatar={avatar}>
+          {children}
+        </ButtonLabel>
       </ListItemButton>
+      }
     </ListItem>
   )
 }
 
-export default ProjectListItem
+const ButtonLabel = ({
+  disabled,
+  avatar,
+  children
+}: {
+  disabled?: boolean
+  avatar: React.ReactNode
+  children?: React.ReactNode
+}) => {
+  return (
+    <MenuItemHover
+      disabled={disabled}
+      sx={{
+        ".avatar": {
+          transform: "scale(1)",
+          transition: "transform 0.3s ease-in-out"
+        },
+        "&:hover .avatar": {
+          transform: `scale(${disabled ? 1 : 1.08})`
+        }
+      }}>
+      <Stack direction="row" alignItems="center" spacing={1.5}>
+        <Box className="avatar">
+          <ProjectAvatarSquircle
+            width={AVATAR_SIZE.width}
+            height={AVATAR_SIZE.height}
+            sx={{ position: "relative" }}
+          >
+            {avatar}
+          </ProjectAvatarSquircle>
+        </Box>
+        {children}
+      </Stack>
+    </MenuItemHover>
+  )
+}
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
deleted file mode 100644
index 77de983a..00000000
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ListItem, ListItemText, Stack, Skeleton } from "@mui/material"
-import MenuItemHover from "@/common/ui/MenuItemHover"
-import ProjectAvatarSquircle from "./ProjectAvatarSquircle"
-
-const ProjectListItemPlaceholder = () => {
-  return (
-    <ListItem>
-      <MenuItemHover disabled>
-        <Stack
-          direction="row" alignItems="center" spacing={1}
-          sx={{
-            padding: 0,
-            marginTop: 0.5,
-            marginBottom: 0.5
-          }}
-        >
-          <ProjectAvatarSquircle
-            width={42}
-            height={42}
-            sx={{
-              // Offset the squircle to make it align with
-              // the border of the actual avatar when loaded.
-              position: "relative",
-              left: "-1px",
-              top: "-1px"
-          }}
-          >
-            <Skeleton
-              variant="rectangular"
-              animation="wave"
-              sx={{ width: 42, height: 42 }}
-            />
-          </ProjectAvatarSquircle>
-          <ListItemText
-            sx={{
-              position: "relative",
-              top: "-2px"
-            }}
-            primary={
-              <Skeleton
-                variant="text"
-                animation="wave"
-                width={100}
-              />
-            }
-          />
-        </Stack>
-      </MenuItemHover>
-    </ListItem>
-  )
-}
-
-export default ProjectListItemPlaceholder
\ No newline at end of file