[ui] Add LoadingSpinner component

Adds a component to display a loading spinner and an optional loading message. Signed-off-by: Eva Millán <[email protected]>
chaoss · Aug 9, 2024 · b83dc3c · b83dc3c
1 parent 51f29eb
commit b83dc3c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/ui/src/components/LoadingSpinner.stories.js b/ui/src/components/LoadingSpinner.stories.js
@@ -0,0 +1,24 @@
+import LoadingSpinner from "./LoadingSpinner.vue";
+
+export default {
+  title: "LoadingSpinner",
+  excludeStories: /.*Data$/,
+};
+
+const template = `<loading-spinner :label="label"/>`;
+
+export const Default = () => ({
+  components: { LoadingSpinner },
+  template: template,
+  data: () => ({
+    label: null,
+  }),
+});
+
+export const Label = () => ({
+  components: { LoadingSpinner },
+  template: template,
+  data: () => ({
+    label: "Loading...",
+  }),
+});
diff --git a/ui/src/components/LoadingSpinner.vue b/ui/src/components/LoadingSpinner.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="d-flex flex-column justify-center align-center pa-4 h-100">
+    <v-progress-circular :size="size" color="primary" indeterminate />
+    <p v-if="label" class="subtitle-1 text-medium-emphasis mt-4">{{ label }}</p>
+  </div>
+</template>
+<script>
+export default {
+  name: "LoadingSpinner",
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    size: {
+      type: [String, Number],
+      required: false,
+      default: 48,
+    },
+  },
+};
+</script>