Component specification

Displays loading placeholders (skeleton screens) while content is being fetched or processed. Provides visual feedback to users that content is loading without showing a blank screen.

• Component Name: N8nLoading
• Figma Component: TBD
• Element+ Component: ElSkeleton
• Reka UI Component: Primitive (no native Skeleton component)
• Nuxt UI Component: Skeleton

Public API Definition

Props

• animated?: boolean - Controls whether the skeleton shows pulsing animation. Default: true
• rows?: number - Number of skeleton rows to display. Default: 1
• cols?: number - Number of skeleton columns to display. When set (non-zero), overrides row-based layout. Default: 0
• shrinkLast?: boolean - Whether to shrink the last row to a shorter width. Only applies to 'h1' and 'p' variants when rows > 1. Default: true
• variant?: SkeletonVariant - Visual variant determining the shape and style of skeleton items. Values: 'custom' | 'p' | 'text' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect'. Default: 'p'

Events

None - This is a purely presentational component.

Slots

None - Content is generated based on props.

Template usage example

Basic loading with rows:

<script setup lang="ts">

</script>

<template>
  
  

  
  
</template>

Variant-specific loading:

<script setup lang="ts">

</script>

<template>
  
  

  
  

  
  

  
  

  
  

  
  

  
  
</template>

Without shrinking the last row:

<script setup lang="ts">

</script>

<template>
  
  
</template>

Controlling animation:

<script setup lang="ts">

const isLoading = ref(true)
const loadingRows = ref(5)
</script>

<template>
  
  

  
  
</template>

Multiple instances for list items:

<script setup lang="ts">

</script>

<template>
  <div class="list">
    
    
    
  </div>
</template>

<style>
.mb-xs {
  margin-bottom: var(--spacing--xs);
}
</style>

Conditional loading based on data availability:

<script setup lang="ts">

const template = ref(null)
</script>

<template>
  <div>
    
    
    

    
    <template v-if="template">
      <h1>{{ template.name }}</h1>
      <p>{{ template.description }}</p>
    </template>
  </div>
</template>

Column-based layout:

<script setup lang="ts">

</script>

<template>
  
  
</template>

Custom styling with CSS classes:

<script setup lang="ts">

</script>

<template>
  
</template>

<style>
:global(.n8n-loading) div {
  height: 32px;
  width: 300px;
  margin: 0;
}

:global(.n8n-loading) > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--2xs);
}
</style>