diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
new file mode 100644
index 00000000..a9b7e2ba
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{ height, width }" class="b-skeleton" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeleton',
+
+  props: {
+    height: { type: String, required: true },
+    width: { type: String, required: true },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: $gray-200;
+  cursor: wait;
+
+  height: $font-size-base;
+  margin-bottom: map-get($spacers, 1);
+
+  @if $enable-rounded {
+    border-radius: 0.25rem;
+  }
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
+}
+</style>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
new file mode 100644
index 00000000..0d493255
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -0,0 +1,22 @@
+<template>
+  <div v-if="loading" class="b-skeleton-wrapper">
+    <slot name="loading" />
+  </div>
+  <slot v-else name="default" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeletonWrapper',
+
+  props: {
+    loading: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton-wrapper {
+  cursor: wait;
+}
+</style>