Dev branch

resources/js/Components/Skeleton/SkeletonTable.vue

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+  rows: { type: Number, default: 5 },
+  cols: { type: Number, default: 4 },
+});
+</script>
+
+<template>
+  <div class="w-full animate-pulse">
+    <div class="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
+      <!-- Table header skeleton -->
+      <div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
+        <div class="flex gap-4">
+          <div
+            v-for="i in cols"
+            :key="i"
+            class="h-4 bg-gray-200 rounded flex-1"
+            :class="{ 'max-w-[150px]': i === 1 }"
+          ></div>
+        </div>
+      </div>
+      <!-- Table body skeleton -->
+      <div class="divide-y divide-gray-200">
+        <div
+          v-for="row in rows"
+          :key="row"
+          class="px-6 py-4 flex gap-4 items-center"
+        >
+          <div
+            v-for="i in cols"
+            :key="i"
+            class="h-4 bg-gray-100 rounded flex-1"
+            :class="{
+              'max-w-[120px]': i === 1,
+              'max-w-[100px]': i === 2,
+            }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+