@alikhalilll/a-skeleton 1.1.0 → 1.2.0

package/src/components/CloneNode.ts

@@ -0,0 +1,161 @@
+/**
+ * `CloneNode` — recursive renderer for one node of a `CaptureSnapshot`.
+ *
+ * Design:
+ *   - **Strategy table by `CapturedNode.kind`**. Each kind ('container' |
+ *     'text' | 'image' | 'video' | 'media' | 'block') has its own renderer
+ *     function. Adding a new kind is one entry in `RENDERERS` — no edits
+ *     elsewhere (Open/Closed).
+ *   - **Pure render function**. No reactive state of its own; everything
+ *     flows from props.
+ *   - **Composition**: per-line text bars share the same shape as block
+ *     leaves so there's no behaviour duplication.
+ */
+import { defineComponent, h, type PropType, type VNode } from 'vue';
+import type { CapturedNode, TextLineRect } from '../utils/captureStyles';
+import { renderImageIcon, renderPlayIcon } from './icons';
+
+interface RendererCtx {
+  node: CapturedNode;
+  animClass: string | null;
+  /** Convert a captured node into its absolute-positioned style object. */
+  blockStyle: (n: CapturedNode) => Record<string, unknown>;
+  /** Build the inline style for a per-line text bar. */
+  lineStyle: (
+    line: TextLineRect,
+    parentStyle: Readonly<Record<string, string>>
+  ) => Record<string, unknown>;
+}
+
+type Renderer = (ctx: RendererCtx) => VNode;
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * Strategy table — one renderer per `CapturedNode.kind`.
+ * ───────────────────────────────────────────────────────────────────────────── */
+const RENDERERS: Record<CapturedNode['kind'], Renderer> = {
+  container: renderContainer,
+  text: renderText,
+  image: (ctx) => renderLeafWithIcon(ctx, 'image'),
+  video: (ctx) => renderLeafWithIcon(ctx, 'video'),
+  media: (ctx) => renderLeaf(ctx),
+  block: (ctx) => renderLeaf(ctx),
+};
+
+/**
+ * Container — positioned wrapper with captured background / border / shadow.
+ * No `.a-skel` class so the surface shows through exactly as in the real DOM.
+ * Recurse into children via the same `CloneNode`.
+ *
+ * `CapturedNode.{x,y}` is always root-relative, but children render inside
+ * this container — itself `position: absolute`. If we hand children the
+ * root-relative coords as-is, their `left` / `top` resolve against the
+ * container (their new offset parent), doubling the offset. Pass a
+ * `blockStyle` closure that subtracts this container's offset so each
+ * descendant lands at its captured root-relative position regardless of
+ * how deeply it's nested.
+ */
+function renderContainer(ctx: RendererCtx): VNode {
+  const { node } = ctx;
+  const childBlockStyle = (n: CapturedNode): Record<string, unknown> => ({
+    position: 'absolute',
+    left: `${n.x - node.x}px`,
+    top: `${n.y - node.y}px`,
+    width: `${n.w}px`,
+    height: `${n.h}px`,
+    ...n.style,
+  });
+  return h(
+    'div',
+    {
+      class: 'a-skel-clone-container',
+      style: ctx.blockStyle(node),
+      'aria-hidden': 'true',
+    },
+    (node.children ?? []).map((child) =>
+      h(CloneNode, {
+        node: child,
+        animClass: ctx.animClass,
+        blockStyle: childBlockStyle,
+        lineStyle: ctx.lineStyle,
+      })
+    )
+  );
+}
+
+/**
+ * Text — container carrying captured background/border, with per-line
+ * shimmer bars positioned absolutely inside. Each text line becomes one bar
+ * at the exact rendered text rect (multi-line / wrapped / RTL all replay 1:1).
+ */
+function renderText(ctx: RendererCtx): VNode {
+  const { node, animClass } = ctx;
+  /* Fallback to a single full-rect bar if the Range API wasn't usable. */
+  const lines = node.textLines ?? [{ x: node.x, y: node.y, w: node.w, h: node.h }];
+  return h(
+    'div',
+    {
+      class: 'a-skel-clone-container a-skel-clone-text',
+      style: ctx.blockStyle(node),
+      'aria-hidden': 'true',
+    },
+    lines.map((line) =>
+      h('div', {
+        class: ['a-skel-clone-textbar', animClass],
+        style: ctx.lineStyle(
+          /* Convert root-relative line coords → container-relative. */
+          { x: line.x - node.x, y: line.y - node.y, w: line.w, h: line.h },
+          node.style
+        ),
+      })
+    )
+  );
+}
+
+/** Plain shimmer leaf (block / media). */
+function renderLeaf(ctx: RendererCtx): VNode {
+  return h('div', {
+    class: ['a-skel a-skel-clone-leaf', ctx.animClass],
+    style: ctx.blockStyle(ctx.node),
+    'aria-hidden': 'true',
+  });
+}
+
+/** Shimmer leaf with a centered placeholder icon (image / video). */
+function renderLeafWithIcon(ctx: RendererCtx, kind: 'image' | 'video'): VNode {
+  return h(
+    'div',
+    {
+      class: ['a-skel a-skel-clone-leaf a-skel-clone-leaf--with-icon', ctx.animClass],
+      style: ctx.blockStyle(ctx.node),
+      'aria-hidden': 'true',
+    },
+    [kind === 'image' ? renderImageIcon() : renderPlayIcon()]
+  );
+}
+
+export const CloneNode = defineComponent({
+  name: 'CloneNode',
+  props: {
+    node: { type: Object as PropType<CapturedNode>, required: true },
+    animClass: { type: [String, null] as PropType<string | null>, default: null },
+    blockStyle: {
+      type: Function as PropType<RendererCtx['blockStyle']>,
+      required: true,
+    },
+    lineStyle: {
+      type: Function as PropType<RendererCtx['lineStyle']>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      const renderer = RENDERERS[props.node.kind];
+      return renderer({
+        node: props.node,
+        animClass: props.animClass,
+        blockStyle: props.blockStyle,
+        lineStyle: props.lineStyle,
+      });
+    };
+  },
+});

package/src/components/StructuralLayerNode.ts

@@ -0,0 +1,157 @@
+/**
+ * `StructuralLayerNode` — recursive renderer for a `StructuralNode` from a
+ * `StructuralShape` captured by `walkStructural`. Used internally by
+ * `<ASkeletonLayer>`.
+ *
+ * Design:
+ *   - **Strategy table** keyed by `node.kind` + `node.leafKind`. Each kind has
+ *     its own renderer function. Adding a new kind is one entry in `RENDERERS`
+ *     (Open/Closed) — no edits elsewhere.
+ *   - **Pure render function**: no reactive state of its own; everything flows
+ *     from props.
+ *   - **Container preservation**: container nodes emit `<{node.tag}
+ *     :class="node.className" :style="node.style">…children…</…>`. The
+ *     captured `style` carries comprehensive layout + visual CSS so the
+ *     skeleton reads correctly even when the consumer's stylesheet isn't
+ *     loaded at the mount point.
+ *   - **Leaves**: render `<div class="a-skel + originalClass" :style="style">`.
+ *     The original `class` is preserved so utility-first CSS (`mt-4`,
+ *     `flex-1`, `inline-block`, …) survives; the captured style carries the
+ *     same layout + visual properties used on containers plus `width` +
+ *     `height` so the placeholder claims the right space.
+ */
+import { defineComponent, h, type PropType, type VNode } from 'vue';
+import type { ContainerNode, LeafKind, LeafNode, StructuralNode } from '../types';
+import { renderImageIcon, renderPlayIcon } from './icons';
+
+interface RendererCtx {
+  node: StructuralNode;
+  animClass: string | null;
+}
+
+type Renderer = (ctx: RendererCtx) => VNode;
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * Strategy table — one renderer per kind. Containers carry their captured
+ * structure; leaves render as a-skel placeholders.
+ * ───────────────────────────────────────────────────────────────────────────── */
+const LEAF_RENDERERS: Record<LeafKind, (node: LeafNode, animClass: string | null) => VNode> = {
+  block: renderLeafBlock,
+  media: renderLeafBlock,
+  text: renderLeafText,
+  image: (node, animClass) => renderLeafWithIcon(node, animClass, 'image'),
+};
+
+function renderContainer(node: ContainerNode, animClass: string | null): VNode {
+  return h(
+    node.tag,
+    {
+      class: node.className || undefined,
+      style: node.style,
+      'aria-hidden': 'true',
+    },
+    node.children.map((child) => h(StructuralLayerNode, { node: child, animClass }))
+  );
+}
+
+/**
+ * Build the leaf's `class` payload. Always includes `a-skel` (skeleton
+ * surface) + the animation class; the original consumer class trails so it
+ * survives the cascade alongside utility-first frameworks.
+ */
+function leafClass(node: LeafNode, animClass: string | null, extra?: string): string[] {
+  const classes: string[] = ['a-skel'];
+  if (extra) classes.push(extra);
+  if (animClass) classes.push(animClass);
+  if (node.className) classes.push(node.className);
+  return classes;
+}
+
+function renderLeafBlock(node: LeafNode, animClass: string | null): VNode {
+  return h('div', {
+    class: leafClass(node, animClass),
+    style: node.style,
+    'aria-hidden': 'true',
+  });
+}
+
+/**
+ * Text leaf — host carries the captured layout + visual surface (including
+ * the leaf's `width` / `height` so it claims the right space in its parent's
+ * layout). Each captured per-line rect renders as one bar inside the host,
+ * absolutely positioned at the captured rect (rects are leaf-relative; the
+ * host's captured style includes `position: relative` via the `.a-skel-text-host`
+ * default — see styles.src.css).
+ *
+ * When `textLines` is absent (Range API unusable), the leaf renders as a
+ * single shimmer bar at the host's bounds — same as a leaf-block.
+ */
+function renderLeafText(node: LeafNode, animClass: string | null): VNode {
+  const lines = node.textLines;
+  if (!lines || lines.length === 0) {
+    return h('div', {
+      class: leafClass(node, animClass, 'a-skel--text'),
+      style: node.style,
+      'aria-hidden': 'true',
+    });
+  }
+  return h(
+    'div',
+    {
+      class: ['a-skel-text-host', node.className || undefined],
+      style: node.style,
+      'aria-hidden': 'true',
+    },
+    lines.map((line) =>
+      h('div', {
+        class: ['a-skel', 'a-skel--text-line', animClass],
+        style: {
+          position: 'absolute',
+          left: `${line.x}px`,
+          top: `${line.y}px`,
+          width: `${line.w}px`,
+          height: `${line.h}px`,
+        },
+      })
+    )
+  );
+}
+
+function renderLeafWithIcon(
+  node: LeafNode,
+  animClass: string | null,
+  kind: 'image' | 'video'
+): VNode {
+  return h(
+    'div',
+    {
+      class: leafClass(node, animClass, 'a-skel--with-icon'),
+      style: node.style,
+      'aria-hidden': 'true',
+    },
+    [kind === 'image' ? renderImageIcon() : renderPlayIcon()]
+  );
+}
+
+const RENDERERS: Record<'container' | 'leaf', Renderer> = {
+  container: (ctx) => renderContainer(ctx.node as ContainerNode, ctx.animClass),
+  leaf: (ctx) => {
+    const leaf = ctx.node as LeafNode;
+    return LEAF_RENDERERS[leaf.leafKind](leaf, ctx.animClass);
+  },
+};
+
+export const StructuralLayerNode = defineComponent({
+  name: 'StructuralLayerNode',
+  props: {
+    node: { type: Object as PropType<StructuralNode>, required: true },
+    animClass: { type: [String, null] as PropType<string | null>, default: null },
+  },
+  setup(props) {
+    return () =>
+      RENDERERS[props.node.kind]({
+        node: props.node,
+        animClass: props.animClass,
+      });
+  },
+});

package/src/components/icons.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared placeholder icon renderers for leaf nodes (image / video). Lives at
+ * one site so both `CloneNode.ts` (clone mode) and `StructuralLayerNode.ts`
+ * (Recipe 3 structural mode) render identical glyphs.
+ */
+import { h, type VNode } from 'vue';
+
+export function renderImageIcon(): VNode {
+  return h(
+    'svg',
+    {
+      class: 'a-skel-clone-icon',
+      viewBox: '0 0 24 24',
+      'aria-hidden': 'true',
+    },
+    [
+      h('path', {
+        d: 'M19 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-3.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM19 17H5l3.5-4.5 2.5 3 3.5-4.5L19 17Z',
+        fill: 'currentColor',
+      }),
+    ]
+  );
+}
+
+export function renderPlayIcon(): VNode {
+  return h(
+    'svg',
+    {
+      class: 'a-skel-clone-icon',
+      viewBox: '0 0 24 24',
+      'aria-hidden': 'true',
+    },
+    [
+      h('circle', {
+        cx: 12,
+        cy: 12,
+        r: 10,
+        stroke: 'currentColor',
+        'stroke-width': 1.5,
+        fill: 'none',
+      }),
+      h('path', { d: 'M10 8l6 4-6 4V8Z', fill: 'currentColor' }),
+    ]
+  );
+}

package/src/components/variants/ASkeletonArticle.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import ASkeletonHeading from './ASkeletonHeading.vue';
+import ASkeletonText from './ASkeletonText.vue';
+import ASkeletonImage from './ASkeletonImage.vue';
+
+interface Props {
+  media?: boolean;
+  paragraphs?: number;
+  linesPerParagraph?: number;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+withDefaults(defineProps<Props>(), {
+  media: true,
+  paragraphs: 3,
+  linesPerParagraph: 4,
+  animation: 'pulse',
+});
+</script>
+
+<template>
+  <article :class="cn('flex flex-col gap-4', $props.class)" role="status" aria-busy="true">
+    <ASkeletonHeading :level="1" :animation="$props.animation" />
+    <ASkeletonImage v-if="$props.media" :animation="$props.animation" />
+    <div v-for="i in $props.paragraphs" :key="i">
+      <ASkeletonText :lines="$props.linesPerParagraph" :animation="$props.animation" />
+    </div>
+    <span class="a-skel-sr-only">Loading article…</span>
+  </article>
+</template>

package/src/components/variants/ASkeletonAvatar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+
+interface Props {
+  size?: number | string;
+  shape?: 'circle' | 'square' | 'rounded';
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), { size: 48, shape: 'circle', animation: 'pulse' });
+
+const animClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-anim-${props.animation}`
+);
+
+const sizeStyle = computed(() => {
+  const s = typeof props.size === 'number' ? `${props.size}px` : String(props.size);
+  return {
+    width: s,
+    height: s,
+    borderRadius:
+      props.shape === 'circle'
+        ? '9999px'
+        : props.shape === 'rounded'
+          ? 'var(--ak-skel-radius)'
+          : '0',
+  };
+});
+</script>
+
+<template>
+  <div
+    :class="cn('a-skel a-skel-variant-avatar', animClass, props.class)"
+    :style="sizeStyle"
+    role="status"
+    aria-busy="true"
+  >
+    <span class="a-skel-sr-only">Loading avatar…</span>
+  </div>
+</template>

package/src/components/variants/ASkeletonButton.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  outlined?: boolean;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), { width: 120, height: 40, animation: 'pulse' });
+
+const animClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-anim-${props.animation}`
+);
+
+const rootStyle = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : String(props.width),
+  height: typeof props.height === 'number' ? `${props.height}px` : String(props.height),
+  ...(props.outlined
+    ? { backgroundColor: 'transparent', border: '1px solid var(--ak-skel-ring)' }
+    : {}),
+}));
+</script>
+
+<template>
+  <div
+    :class="cn('a-skel a-skel-variant-button', animClass, props.class)"
+    :style="rootStyle"
+    role="status"
+    aria-busy="true"
+  >
+    <span class="a-skel-sr-only">Loading button…</span>
+  </div>
+</template>

package/src/components/variants/ASkeletonCard.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import ASkeletonImage from './ASkeletonImage.vue';
+import ASkeletonHeading from './ASkeletonHeading.vue';
+import ASkeletonText from './ASkeletonText.vue';
+import ASkeletonButton from './ASkeletonButton.vue';
+import ASkeletonAvatar from './ASkeletonAvatar.vue';
+
+interface Props {
+  media?: boolean;
+  heading?: boolean;
+  lines?: number;
+  actions?: boolean;
+  footerAvatar?: boolean;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+withDefaults(defineProps<Props>(), {
+  media: true,
+  heading: true,
+  lines: 3,
+  actions: true,
+  footerAvatar: false,
+  animation: 'pulse',
+});
+</script>
+
+<template>
+  <div :class="cn('a-skel-variant-card', $props.class)" role="status" aria-busy="true">
+    <ASkeletonImage v-if="$props.media" :animation="$props.animation" />
+    <ASkeletonHeading v-if="$props.heading" :level="3" :animation="$props.animation" />
+    <ASkeletonText :lines="$props.lines" :animation="$props.animation" />
+    <div v-if="$props.actions" class="mt-2 flex gap-2">
+      <ASkeletonButton :width="96" :height="36" :animation="$props.animation" />
+      <ASkeletonButton :width="96" :height="36" outlined :animation="$props.animation" />
+    </div>
+    <div v-if="$props.footerAvatar" class="mt-3 flex items-center gap-3">
+      <ASkeletonAvatar :size="36" :animation="$props.animation" />
+      <div style="flex: 1">
+        <ASkeletonText :lines="2" :animation="$props.animation" />
+      </div>
+    </div>
+    <span class="a-skel-sr-only">Loading card…</span>
+  </div>
+</template>

package/src/components/variants/ASkeletonChart.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import ASkeletonHeading from './ASkeletonHeading.vue';
+import ASkeletonText from './ASkeletonText.vue';
+
+interface Props {
+  bars?: number;
+  height?: number | string;
+  showHeader?: boolean;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bars: 7,
+  height: '8rem',
+  showHeader: true,
+  animation: 'pulse',
+});
+
+const animClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-anim-${props.animation}`
+);
+
+const chartStyle = computed(() => ({
+  height: typeof props.height === 'number' ? `${props.height}px` : String(props.height),
+}));
+
+/* Pseudo-random but deterministic bar heights so the chart looks organic but
+ * doesn't reshuffle on each render. */
+const HEIGHTS = [62, 78, 45, 91, 68, 82, 55, 73, 39, 88, 60, 74];
+function barHeight(i: number): string {
+  return `${HEIGHTS[i % HEIGHTS.length]}%`;
+}
+</script>
+
+<template>
+  <div :class="cn(props.class)" role="status" aria-busy="true">
+    <template v-if="props.showHeader">
+      <ASkeletonHeading :level="4" :animation="props.animation" :width="'45%'" />
+      <div style="margin-top: 0.4rem">
+        <ASkeletonText :lines="1" :animation="props.animation" :width="'60%'" />
+      </div>
+    </template>
+    <div class="a-skel-variant-chart" :style="chartStyle" style="margin-top: 1rem">
+      <div
+        v-for="i in props.bars"
+        :key="i"
+        :class="cn('a-skel a-skel-variant-chart__bar', animClass)"
+        :style="{ height: barHeight(i - 1) }"
+      />
+    </div>
+    <span class="a-skel-sr-only">Loading chart…</span>
+  </div>
+</template>

package/src/components/variants/ASkeletonChip.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), { width: 80, height: 24, animation: 'pulse' });
+
+const animClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-anim-${props.animation}`
+);
+const rootStyle = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : String(props.width),
+  height: typeof props.height === 'number' ? `${props.height}px` : String(props.height),
+  borderRadius: '9999px',
+  display: 'inline-block',
+}));
+</script>
+
+<template>
+  <span
+    :class="cn('a-skel', animClass, props.class)"
+    :style="rootStyle"
+    role="status"
+    aria-busy="true"
+  />
+</template>

package/src/components/variants/ASkeletonDivider.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+
+interface Props {
+  thickness?: number;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), { thickness: 1, animation: 'pulse' });
+
+const animClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-anim-${props.animation}`
+);
+const rootStyle = computed(() => ({ height: `${props.thickness}px`, width: '100%' }));
+</script>
+
+<template>
+  <div
+    :class="cn('a-skel', animClass, props.class)"
+    :style="rootStyle"
+    role="separator"
+    aria-hidden="true"
+  />
+</template>

package/src/components/variants/ASkeletonForm.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import ASkeletonText from './ASkeletonText.vue';
+import ASkeletonInput from './ASkeletonInput.vue';
+import ASkeletonButton from './ASkeletonButton.vue';
+
+interface Props {
+  fields?: number;
+  showSubmit?: boolean;
+  animation?: 'pulse' | 'shimmer' | 'wave' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
+withDefaults(defineProps<Props>(), { fields: 3, showSubmit: true, animation: 'pulse' });
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-4', $props.class)" role="status" aria-busy="true">
+    <div v-for="i in $props.fields" :key="i" class="flex flex-col gap-2">
+      <ASkeletonText :lines="1" :width="'30%'" :animation="$props.animation" />
+      <ASkeletonInput :animation="$props.animation" />
+    </div>
+    <ASkeletonButton
+      v-if="$props.showSubmit"
+      :width="120"
+      :height="40"
+      :animation="$props.animation"
+    />
+    <span class="a-skel-sr-only">Loading form…</span>
+  </div>
+</template>