LoadingIndicator

const loadingIndicatorFixture = {
  id: "loading-indicator",
  sizes: ["md", "lg"],
  labelledSize: "lg",
  labelledText: "Resolving tokens",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { LoadingIndicator } from "@grassroot/ui-react";
 
export default function LoadingIndicatorDemo() {
  return (
    <div>
      {loadingIndicatorFixture.sizes.map((size) => (
        <LoadingIndicator key={size} size={size} />
      ))}
      <LoadingIndicator
        size={loadingIndicatorFixture.labelledSize}
        label={loadingIndicatorFixture.labelledText}
      />
    </div>
  );
}

<script setup lang="ts">
const loadingIndicatorFixture = {
  id: "loading-indicator",
  sizes: ["md", "lg"],
  labelledSize: "lg",
  labelledText: "Resolving tokens",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { LoadingIndicator } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <LoadingIndicator v-for="size in loadingIndicatorFixture.sizes" :key="size" :size="size" />
    <LoadingIndicator
      :size="loadingIndicatorFixture.labelledSize"
      :label="loadingIndicatorFixture.labelledText"
    />
  </div>
</template>

import { Component } from "@angular/core";
const loadingIndicatorFixture = {
  id: "loading-indicator",
  sizes: ["md", "lg"],
  labelledSize: "lg",
  labelledText: "Resolving tokens",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { GrassrootLoadingIndicator } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-loading-indicator-demo",
  standalone: true,
  imports: [GrassrootLoadingIndicator],
  template: `
    <div>
      @for (size of fixture.sizes; track size) {
        <grassroot-loading-indicator [size]="size" />
      }
      <grassroot-loading-indicator [size]="fixture.labelledSize" [label]="fixture.labelledText" />
    </div>
  `,
})
export class LoadingIndicatorDemoComponent {
  protected readonly fixture = loadingIndicatorFixture;
}
 
export default LoadingIndicatorDemoComponent;

<script lang="ts">
  import { LoadingIndicator } from "@grassroot/ui-svelte";
  const loadingIndicatorFixture = {
    id: "loading-indicator",
    sizes: ["md", "lg"],
    labelledSize: "lg",
    labelledText: "Resolving tokens",
  } satisfies {
    id: string;
    sizes: Array<"sm" | "md" | "lg">;
    labelledSize: "sm" | "md" | "lg";
    labelledText: string;
  };
 
  </script>
 
<div>
  {#each loadingIndicatorFixture.sizes as size (size)}<LoadingIndicator
      {size}
    />{/each}<LoadingIndicator
    size={loadingIndicatorFixture.labelledSize}
    label={loadingIndicatorFixture.labelledText}
  />
</div>

/** @jsxImportSource solid-js */
import { For } from "solid-js";
const loadingIndicatorFixture = {
  id: "loading-indicator",
  sizes: ["md", "lg"],
  labelledSize: "lg",
  labelledText: "Resolving tokens",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { LoadingIndicator } from "@grassroot/ui-solid";
 
export default function LoadingIndicatorDemo() {
  return (
    <div>
      <For each={loadingIndicatorFixture.sizes}>{(size) => <LoadingIndicator size={size} />}</For>
      <LoadingIndicator
        size={loadingIndicatorFixture.labelledSize}
        label={loadingIndicatorFixture.labelledText}
      />
    </div>
  );
}