SvelteKit Package

core-ui-utilities

UI utilities — loading states, page transitions, skeleton placeholders

SvelteKit Ready UI

Loading States svelte

<script>
  import { DataLoadingState, Skeleton }
    from '@sbx/core-ui/components/utilities';

  let { data } = $props();
</script>

<DataLoadingState loading={!data.items} error={data.error}
  empty={data.items?.length === 0}>
  {#each data.items as item}
    <ItemCard {item} />
  {/each}
</DataLoadingState>

<!-- Or manual skeleton layout -->
<Skeleton width="100%" height="200px" rounded />
<Skeleton width="60%" height="1.2rem" />

About

Cross-cutting utility components for loading states and transitions. DataLoadingState provides a unified loading/error/empty pattern, PageTransition handles route change animations, and Skeleton renders placeholder shimmer effects during data fetching.

Public API

Name	Kind	Signature
DataLoadingState	type	DataLoadingState.svelte — loading, error, empty, children slot
PageTransition	type	PageTransition.svelte — key, duration, direction
Skeleton	type	Skeleton.svelte — width, height, rounded, animated

Dependencies

Imported By (2)

core-ui-blocks SvelteKit Ready

Composite UI blocks — NavRail, CommandPalette, ChatWidget, FileTree, Editors

svelte-5componentsnavigationeditorsdata-displaypresenter-driven

15 exports 2 deps

core-ui-sections SvelteKit Ready

Page sections & layouts — AdminTemplate, ContentSidebar, EntityDetail, Canvas

svelte-5layoutsidebarentity-vieweradmin-templatecanvas

16 exports 2 deps

Source

@sbx/core-ui/components/utilities

svelte-5loadingskeletontransitionserror-handling