docs: Add component specification for N8nLoading with API definition and usage examples

[cstuncsik]

Summary

Add API specification for N8nLoading migration from Element+ to Reka UI, documenting all 6 props currently used in the codebase (including animated, loading, rows, cols, shrinkLast, and variant with 9 possible values) with 8 usage examples and implementation notes for backward compatibility

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/DS-309/write-loader-api-specs

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

---

Note

Add documentation/spec for N8nLoading skeleton component, defining props and showcasing usage patterns.

• Docs: Add component spec packages/frontend/@n8n/design-system/src/v2/components/Loading/component-loading.md for N8nLoading.
  • Public API: Documents props animated, loading, rows, cols, shrinkLast, variant (with supported values), plus notes on no events/slots.
  • Usage Examples: Demonstrates rows vs. cols, variant-specific shapes, disabling shrink, toggling animation, conditional rendering, repeated list items, and custom styling.

^{Written by Cursor Bugbot for commit a19ae81. This will update automatically on new commits. Configure here.}

[bundlemon]

BundleMon

Unchanged files (2)

Status	Path	Size	Limits
✅	WASM Dependencies tree-sitter-bash.wasm	181.26KB	-
✅	WASM Dependencies tree-sitter.wasm	74.47KB	-

No change in files bundle size

Groups updated (2)

Status	Path	Size	Limits
✅	**/*.js	11.33MB (+38.5KB +0.33%)	-
✅	**/*.css	227.16KB (+6.39KB +2.89%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (all 1 issues)

Understand the root cause of the following 1 issues and fix them.


<file name="packages/frontend/@n8n/design-system/src/v2/components/Loading/component-loading.md">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/Loading/component-loading.md:162">
Example claims column layout honors `variant`, but the component ignores `variant` when `cols` is set, so the documented behavior cannot be achieved.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[cubic-dev-ai]

Example claims column layout honors variant, but the component ignores variant when cols is set, so the documented behavior cannot be achieved.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/v2/components/Loading/component-loading.md at line 162:

<comment>Example claims column layout honors `variant`, but the component ignores `variant` when `cols` is set, so the documented behavior cannot be achieved.</comment>

<file context>
@@ -0,0 +1,189 @@
+
+&lt;template&gt;
+  &lt;!-- Renders 4 columns instead of rows --&gt;
+  &lt;N8nLoading :cols=&quot;4&quot; variant=&quot;rect&quot; /&gt;
+&lt;/template&gt;
+```
</file context>