Loader

const loaderFixture = {
  id: "loader",
  variants: [
    { variant: "rotator", size: "md" },
    { variant: "equalizer", size: "lg" },
    { variant: "noodle", size: "md", speed: 0.6, label: "Compiling" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    variant: "rotator" | "equalizer" | "noodle";
    size: "sm" | "md" | "lg";
    speed?: number;
    label?: string;
  }>;
};
 
import { Loader } from "@grassroot/ui-react";
 
export default function LoaderDemo() {
  return (
    <div className="vs-ldr-list">
      {loaderFixture.variants.map((v) => (
        <Loader key={v.variant} variant={v.variant} size={v.size} speed={v.speed} label={v.label} />
      ))}
    </div>
  );
}

<script setup lang="ts">
const loaderFixture = {
  id: "loader",
  variants: [
    { variant: "rotator", size: "md" },
    { variant: "equalizer", size: "lg" },
    { variant: "noodle", size: "md", speed: 0.6, label: "Compiling" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    variant: "rotator" | "equalizer" | "noodle";
    size: "sm" | "md" | "lg";
    speed?: number;
    label?: string;
  }>;
};
 
import { Loader } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="vs-ldr-list">
    <Loader
      v-for="v in loaderFixture.variants"
      :key="v.variant"
      :variant="v.variant"
      :size="v.size"
      :speed="v.speed ?? 1"
      :label="v.label ?? 'Loading'"
    />
  </div>
</template>

import { Component } from "@angular/core";
const loaderFixture = {
  id: "loader",
  variants: [
    { variant: "rotator", size: "md" },
    { variant: "equalizer", size: "lg" },
    { variant: "noodle", size: "md", speed: 0.6, label: "Compiling" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    variant: "rotator" | "equalizer" | "noodle";
    size: "sm" | "md" | "lg";
    speed?: number;
    label?: string;
  }>;
};
 
import { GrassrootLoader } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-loader-demo",
  standalone: true,
  imports: [GrassrootLoader],
  host: { style: "display: contents" },
  template: `
    <div class="vs-ldr-list">
      @for (v of variants; track v.variant) {
        <grassroot-loader
          [variant]="v.variant"
          [size]="v.size"
          [speed]="v.speed"
          [label]="v.label"
        />
      }
    </div>
  `,
})
export class LoaderDemoComponent {
  // Angular's signal inputs only fall back to their default when the
  // consumer omits the binding entirely — an explicitly-bound `undefined`
  // (what the fixture's optional speed/label fields would produce for the
  // first two variants) overwrites the default instead of preserving it.
  // Resolve the component's own defaults here so every variant binds a
  // concrete value, matching the other four frameworks' rendered output.
  protected readonly variants = loaderFixture.variants.map((v) => ({
    ...v,
    speed: v.speed ?? 1,
    label: v.label ?? "Loading",
  }));
}
 
export default LoaderDemoComponent;

<script lang="ts">
  import { Loader } from "@grassroot/ui-svelte";
  const loaderFixture = {
    id: "loader",
    variants: [
      { variant: "rotator", size: "md" },
      { variant: "equalizer", size: "lg" },
      { variant: "noodle", size: "md", speed: 0.6, label: "Compiling" },
    ],
  } satisfies {
    id: string;
    variants: Array<{
      variant: "rotator" | "equalizer" | "noodle";
      size: "sm" | "md" | "lg";
      speed?: number;
      label?: string;
    }>;
  };
 
  </script>
 
<div class="vs-ldr-list">
  {#each loaderFixture.variants as v (v.variant)}
    <Loader variant={v.variant} size={v.size} speed={v.speed ?? 1} label={v.label ?? "Loading"} />
  {/each}
</div>

/** @jsxImportSource solid-js */
import { For } from "solid-js";
const loaderFixture = {
  id: "loader",
  variants: [
    { variant: "rotator", size: "md" },
    { variant: "equalizer", size: "lg" },
    { variant: "noodle", size: "md", speed: 0.6, label: "Compiling" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    variant: "rotator" | "equalizer" | "noodle";
    size: "sm" | "md" | "lg";
    speed?: number;
    label?: string;
  }>;
};
 
import { Loader } from "@grassroot/ui-solid";
 
export default function LoaderDemo() {
  return (
    <div class="vs-ldr-list">
      <For each={loaderFixture.variants}>
        {(v) => (
          <Loader
            variant={v.variant}
            size={v.size}
            speed={v.speed ?? 1}
            label={v.label ?? "Loading"}
          />
        )}
      </For>
    </div>
  );
}