feat: update page layout

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 defineProps({
   currentPage: {
@@ -23,6 +24,14 @@ defineProps({
     type: String,
     default: '',
   },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false,
+  },
   showPaginationFooter: {
     type: Boolean,
     default: true,
@@ -30,7 +39,6 @@ defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
-
 const handleButtonClick = () => {
   emit('click');
 };
@@ -69,7 +77,16 @@ const handlePageChange = event => {
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
       <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot name="default" />
+        <div
+          v-if="isFetching"
+          class="flex items-center justify-center py-10 text-n-slate-11"
+        >
+          <Spinner />
+        </div>
+        <div v-else-if="isEmpty">
+          <slot name="emptyState" />
+        </div>
+        <slot v-else name="default" />
       </div>
     </main>
     <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">