Migrate SkeletonTabs from Polaris React

SkeletonTabs has no direct Polaris web component equivalent. Keep it while a Polaris React Tabs call site remains. If the destination uses route navigation, then render stable navigation labels and show loading feedback for the active view instead of drawing tab-shaped placeholders.

Anchor to Map navigation loading behaviorMap navigation loading behavior

Polaris React usage	Polaris web components	Migration notes
Unknown tab labels	Keep Polaris React until labels are known, or redesign the data dependency	Navigation labels shouldn't appear and move after users start interacting.
Known labels with pending panel content	Real links plus a labelled regional spinner	Preserve the current destination and browser history while content loads.
Whole-route navigation	Loading API	Clear loading feedback on success, failure, cancellation, and route change.

Don't pair skeleton navigation with the button-based visual tab approximation that this guide rejects on the Tabs migration page.

Anchor to Migration exampleMigration example

Migrating SkeletonTabs

export function SkeletonTabsMigrationExample() {

return (

<><s-spinner accessibilityLabel="Loading navigation"></s-spinner></>

);

}

import {SkeletonTabs} from '@shopify/polaris';

export function SkeletonTabsMigrationExample() {

return (

);

}

Polaris web components

export function SkeletonTabsMigrationExample() {
  return (
    <><s-spinner accessibilityLabel="Loading navigation"></s-spinner></>
  );
}

Polaris React

import {SkeletonTabs} from '@shopify/polaris';


export function SkeletonTabsMigrationExample() {

  return (
    <SkeletonTabs count={3} />
  );
}

Preview

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Verify the active route remains identifiable while its content loads.
Test keyboard navigation, browser history, failure, and retry.
Remove SkeletonTabs only after the owning Tabs interaction has a supported destination.

Was this page helpful?