diff --git a/src/components/common/LoadingOverlay.vue b/src/components/common/LoadingOverlay.vue
index 3575d03c7..ccc34908e 100644
--- a/src/components/common/LoadingOverlay.vue
+++ b/src/components/common/LoadingOverlay.vue
@@ -7,10 +7,12 @@
       <div class="flex flex-col items-center">
         <div class="grid place-items-center">
           <div
-            :class="[
-              'col-start-1 row-start-1 animate-spin rounded-full border-muted-foreground border-t-base-foreground',
-              spinnerSizeClass
-            ]"
+            :class="
+              cn(
+                'col-start-1 row-start-1 animate-spin rounded-full border-muted-foreground border-t-base-foreground',
+                spinnerSizeClass
+              )
+            "
           />
           <div class="col-start-1 row-start-1">
             <slot />
@@ -27,6 +29,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 const { size = 'md' } = defineProps<{
   loading: boolean
   loadingMessage?: string