feat: ULoader: add variant prop for supporting dots and spinner options

itsJohnnyGrid · itsJohnnyGrid · commit 219ebc5eb946 · 2025-10-28T22:14:27.000+08:00
diff --git a/src/ui.loader/ULoader.vue b/src/ui.loader/ULoader.vue
@@ -4,6 +4,8 @@ import { useTemplateRef } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
+import UIcon from "../ui.image-icon/UIcon.vue";
+
 import { COMPONENT_NAME, ELLIPSES_AMOUNT } from "./constants";
 import defaultConfig from "./config";
 
@@ -29,15 +31,21 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, loaderAttrs, ellipseAttrs, spinnerIconAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <Transition v-bind="config.loaderTransition">
     <div v-if="loading" ref="loader" v-bind="loaderAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        <template v-if="variant === 'spinner'">
+          <UIcon :name="config.defaults.spinnerIcon" :color="color" v-bind="spinnerIconAttrs" />
+        </template>
+        <template v-else>
+          <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        </template>
       </slot>
     </div>
   </Transition>
diff --git a/src/ui.loader/config.ts b/src/ui.loader/config.ts
@@ -1,6 +1,6 @@
 export default /*tw*/ {
   loader: {
-    base: "relative flex items-center",
+    base: "relative flex items-center justify-center",
     variants: {
       size: {
         sm: "h-1.5 w-9",
@@ -49,9 +49,22 @@ export default /*tw*/ {
       },
     },
   },
+  spinnerIcon: {
+    base: "{UIcon} animate-spin",
+    defaults: {
+      size: {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
   defaults: {
     color: "primary",
+    variant: "dots",
     size: "md",
     loading: false,
+    /* icons */
+    spinnerIcon: "progress_activity",
   },
 };
diff --git a/src/ui.loader/storybook/stories.ts b/src/ui.loader/storybook/stories.ts
@@ -16,7 +16,7 @@ import type { Props } from "../types";
 
 interface ULoaderArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "variant";
 }
 
 export default {
@@ -82,6 +82,9 @@ const LoadingTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
+
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
diff --git a/src/ui.loader/types.ts b/src/ui.loader/types.ts
@@ -30,6 +30,11 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
+  /**
+   * Loader variant.
+   */
+  variant?: "dots" | "spinner";
+
   /**
    * Component config object.
    */
