diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index ef6235144..e9ba165d2 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -52,7 +52,7 @@
 			<ProjectsNavigationWrapper/>
 
 			<template #fallback>
-				<Loading class="navigation-loader"/>
+				<Loading variant="small"/>
 			</template>
 		</Suspense>
 
@@ -128,17 +128,4 @@ const menuActive = computed(() => baseStore.menuActive)
 		}
 	}
 }
-
-.navigation-loader {
-	min-width: 100%;
-	height: 150px;
-
-	&.is-loading::after {
-		width: 3rem;
-		height: 3rem;
-		top: calc(50% - 1.5rem);
-		left: calc(50% - 1.5rem);
-		border-width: 3px;
-	}
-}
 </style>
diff --git a/src/components/misc/loading.vue b/src/components/misc/loading.vue
index 65f56448f..bf368b719 100644
--- a/src/components/misc/loading.vue
+++ b/src/components/misc/loading.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container is-loading"></div>
+	<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,14 @@ export default {
 }
 </script>
 
+<script lang="ts" setup>
+const {
+	variant = 'default',
+} = defineProps<{
+	variant: 'default' | 'small'
+}>()
+</script>
+
 <style scoped lang="scss">
 .loader-container {
 	height: 100%;
@@ -20,5 +28,18 @@ export default {
 		min-height: 50px;
 		min-width: 100px;
 	}
+
+	&.is-small {
+		min-width: 100%;
+		height: 150px;
+
+		&.is-loading::after {
+			width: 3rem;
+			height: 3rem;
+			top: calc(50% - 1.5rem);
+			left: calc(50% - 1.5rem);
+			border-width: 3px;
+		}
+	}
 }
 </style>
\ No newline at end of file