From 76814a2d3f68876934c5791bb4901fca5f95c00f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 2 Apr 2023 14:44:13 +0200
Subject: [PATCH] chore: move loading styles to variant into the component

---
 src/components/home/navigation.vue | 15 +--------------
 src/components/misc/loading.vue    | 23 ++++++++++++++++++++++-
 2 files changed, 23 insertions(+), 15 deletions(-)

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