initial: bootstrap from BukidBountyApp base

resources/js/Components/Core/Skeleton/SkeletonBlock.vue

@@ -0,0 +1,68 @@
+<template>
+  <div 
+    class="skeleton-block" 
+    :style="{ 
+      width: width, 
+      height: height, 
+      borderRadius: borderRadius,
+      margin: margin 
+    }"
+    :class="{ 'shimmer': !noShimmer }"
+  ></div>
+</template>
+
+<script setup>
+defineProps({
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '1rem' },
+  borderRadius: { type: String, default: '4px' },
+  margin: { type: String, default: '0' },
+  noShimmer: { type: Boolean, default: false }
+})
+</script>
+
+<style scoped>
+.skeleton-block {
+  background: #f0f2f5;
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.shimmer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0)
+  );
+  animation: shimmer 2s infinite;
+}
+
+:global(.dark-mode) .skeleton-block {
+    background: #2d3138 !important;
+}
+:global(.dark-mode) .shimmer::after {
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.05) 20%,
+    rgba(255, 255, 255, 0.1) 60%,
+    rgba(255, 255, 255, 0)
+  );
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>