diff --git a/.changeset/25915-retire-view-and-shimmer-skeleton.md b/.changeset/25915-retire-view-and-shimmer-skeleton.md new file mode 100644 index 00000000000..3692abe2405 --- /dev/null +++ b/.changeset/25915-retire-view-and-shimmer-skeleton.md @@ -0,0 +1,20 @@ +--- +'@object-ui/components': patch +--- + +refactor(components)!: retire the unused `ViewSkeleton` dispatcher and `ShimmerSkeleton` + +Clause-②: no (narrowing) +Metadata-protocol: none + + + +**BREAKING** for a host that imports either component from `@object-ui/components`. Both were published from the package entry and had no importer anywhere in the workspace, so the Console and every `@object-ui/*` package are unaffected. The other skeletons in `view-skeleton.tsx` stay exported unchanged: `GridSkeleton`, `KanbanSkeleton`, `FormSkeleton`, `ListSkeleton`, `ChartSkeleton` and the `ViewSkeletonProps`, `GridSkeletonProps` and `KanbanSkeletonProps` types. + +What leaves, and what to write instead: + +- FROM `ViewSkeleton` TO the skeleton for the variant you passed: `variant: "grid"` is `GridSkeleton`, `"kanban"` is `KanbanSkeleton`, `"form"` is `FormSkeleton`, `"list"` is `ListSkeleton`, `"chart"` is `ChartSkeleton`, each taking the same remaining props. +- FROM `ViewSkeletonVariant` TO a local union of the variants you render, or no type at all once you call the skeleton components directly. +- FROM `ViewSkeletonDispatchProps` TO `GridSkeletonProps` or `KanbanSkeletonProps` (which carry `columns`; `KanbanSkeletonProps` carries `cardsPerColumn`), or `ViewSkeletonProps` for the others. +- FROM `ShimmerSkeleton` TO `Skeleton` from `@object-ui/components`, or a `div` carrying the `animate-shimmer` utility that `@object-ui/app-shell/styles.css` still declares. +- FROM `ShimmerSkeletonProps` TO `React.HTMLAttributes`, which it aliased. diff --git a/ui/packages/app-shell/src/styles.css b/ui/packages/app-shell/src/styles.css index 02726f39c72..5b75e2925da 100644 --- a/ui/packages/app-shell/src/styles.css +++ b/ui/packages/app-shell/src/styles.css @@ -17,8 +17,7 @@ /* Shimmer keyframe + utility for skeleton loading placeholders. * - * Usage:
or via ShimmerSkeleton - * from @object-ui/components. + * Usage:
* * The keyframe slides a 200%-wide gradient across an element's * background. Pair with `bg-[length:200%_100%]` and a gradient that diff --git a/ui/packages/components/src/custom/index.ts b/ui/packages/components/src/custom/index.ts index 57e2b345209..1593dabd2fc 100644 --- a/ui/packages/components/src/custom/index.ts +++ b/ui/packages/components/src/custom/index.ts @@ -21,7 +21,6 @@ export * from './spinner'; export * from './sort-builder'; export * from './grouping-editor'; export * from './view-skeleton'; -export * from './shimmer-skeleton'; export * from './RecordTitleChip'; export * from './refresh-indicator'; export * from './view-states'; diff --git a/ui/packages/components/src/custom/shimmer-skeleton.tsx b/ui/packages/components/src/custom/shimmer-skeleton.tsx deleted file mode 100644 index 7c49686b67b..00000000000 --- a/ui/packages/components/src/custom/shimmer-skeleton.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * ObjectUI - * Copyright (c) 2024-present ObjectStack Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import * as React from "react" -import { cn } from "../lib/utils" - -/** - * `ShimmerSkeleton` — drop-in replacement for `Skeleton` with a Linear / - * Notion-style shimmer effect instead of the default pulse. - * - * Why: the canonical `Skeleton` from `ui/skeleton.tsx` uses - * `animate-pulse`, which fades opacity uniformly. That reads as "this - * page is loading" but doesn't suggest direction or progress. A - * left-to-right shimmer is the modern enterprise-app convention and - * subjectively feels faster. - * - * Requires the `@keyframes shimmer` + `@utility animate-shimmer` - * declarations in `@object-ui/app-shell/styles.css` (already imported - * by every host app). - * - * Respects `prefers-reduced-motion` automatically: the shimmer is - * applied via `motion-safe:`, so reduced-motion users see a static - * muted block that still communicates "loading" via shape. - * - * @example - * - */ -export type ShimmerSkeletonProps = React.HTMLAttributes; - -export function ShimmerSkeleton({ - className, - ...props -}: ShimmerSkeletonProps) { - return ( -
- ) -} diff --git a/ui/packages/components/src/custom/view-skeleton.tsx b/ui/packages/components/src/custom/view-skeleton.tsx index a6845436a2d..f7ac31f60e2 100644 --- a/ui/packages/components/src/custom/view-skeleton.tsx +++ b/ui/packages/components/src/custom/view-skeleton.tsx @@ -204,37 +204,7 @@ function ChartSkeleton({ ) } -// --------------------------------------------------------------------------- -// ViewSkeleton – convenience wrapper that dispatches by variant -// --------------------------------------------------------------------------- - -export type ViewSkeletonVariant = "grid" | "kanban" | "form" | "list" | "chart" - -export interface ViewSkeletonDispatchProps extends ViewSkeletonProps { - variant: ViewSkeletonVariant - /** Number of columns (grid / kanban) */ - columns?: number - /** Cards per column (kanban only) */ - cardsPerColumn?: number -} - -function ViewSkeleton({ variant, ...props }: ViewSkeletonDispatchProps) { - switch (variant) { - case "grid": - return - case "kanban": - return - case "form": - return - case "list": - return - case "chart": - return - } -} - export { - ViewSkeleton, GridSkeleton, KanbanSkeleton, FormSkeleton,