diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47f53eb..eb0b436 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 Releases are published automatically from `main`; each GitHub release lists its commits. This file describes the larger changes.
 
+## 1.1.0
+
+### Added
+
+- A waiting state: when a step takes a moment to prepare (`onBeforeStep` loading data or navigating, a target that is still rendering), the highlight closes, the screen is dimmed and a spinner appears in the middle, on the web and React Native, with built-in and custom tooltips alike. Before, the previous step stayed unchanged and Next seemed to do nothing until the next one appeared. Pressing the dimmed area meanwhile leaves the tour.
+- `i18n.loadingAriaLabel` (default `'Loading…'`): what screen readers announce while the tour waits, and the spinner's accessible name.
+
 ## 1.0.3
 
 ### Fixed
diff --git a/README.md b/README.md
index 8952685..d3217f0 100644
--- a/README.md
+++ b/README.md
@@ -489,6 +489,7 @@ The defaults meet WCAG AA contrast. A dark theme only needs a dark background an
     stepCounterTemplate: '{current} von {total}',
     closeAriaLabel: 'Tour schließen',
     dotAriaLabelTemplate: 'Zu Schritt {step}',
+    loadingAriaLabel: 'Wird geladen…',
   }}
 >
 ```
@@ -501,6 +502,7 @@ The defaults meet WCAG AA contrast. A dark theme only needs a dark background an
 | `stepCounterTemplate`  | `'{current} of {total}'` |
 | `closeAriaLabel`       | `'Close tour'`           |
 | `dotAriaLabelTemplate` | `'Go to step {step}'`    |
+| `loadingAriaLabel`     | `'Loading…'`             |
 
 ## Custom tooltip
 
@@ -573,7 +575,7 @@ The tour is rendered as a modal `<dialog>` in the browser's top layer, so it is
 ## What the tour does for you
 
 - **Keeps everything in sight.** Before a step is shown, its target is scrolled into view — through every scroll container around it, including horizontal ones — with room for the tooltip. Elements that stay put while the page scrolls (sticky headers, cookie banners, floating buttons; any number, any shape) are detected and the target is scrolled clear of them, in both directions. Targets larger than the screen are aligned to their start. The tooltip is placed inside the visible screen minus safe areas and the on-screen keyboard, flips to another side when there is no room, and scrolls its own content if it is taller than the screen. When the window is resized or rotated, or your app or an animation moves the target, the tour follows.
-- **Waits instead of guessing.** Targets that are not rendered yet (lazy pages, animations, data loading) are awaited, event-driven, for up to 5 seconds.
+- **Waits instead of guessing.** Targets that are not rendered yet (lazy pages, animations, data loading) are awaited, event-driven, for up to 5 seconds. When a step takes a moment to prepare (more than 300 ms), the tour shows that it is waiting: the highlight closes, the screen is dimmed and a spinner appears in the middle (announced to screen readers as `loadingAriaLabel`). Pressing the dimmed area meanwhile leaves the tour.
 - **Animates.** The tour fades in, the highlight glides from target to target together with the scroll, and the tooltip enters from the side it is on. On React Native every animation runs on the UI thread, so it stays smooth while JavaScript is busy. With reduced motion turned on in the system, movement is replaced by short fades.
 - **Is accessible.** On the web the tour is a modal dialog (`aria-modal`, labelled by the step title, described by its content): focus moves into the tooltip and back to where it was when the tour ends, the rest of the page is inert, arrow keys work (but leave text fields, sliders, radio groups and other controls in a custom tooltip alone), <kbd>Esc</kbd> closes the tour, a long tooltip scrolls with the keyboard, and step changes are announced. Buttons have accessible names and large enough touch targets. In Windows high-contrast mode the highlight is drawn as an outline. On React Native, screen-reader focus moves to the tooltip, the app behind it is hidden from screen readers (in a `TourHost`, see [Modal screens](#modal-screens)), and the back button closes the tour.
 - **Costs nothing while idle.** Right after a step appears, the tour checks its target every frame until it has stayed put for a second (three at most), because animations can move it without any event (a React Native screen sliding in, for example). After that, while nothing moves, the tour does no work at all: no timers, no measuring, no re-rendering. Scrolling and resizing are followed once per frame, without re-rendering your app. `useTour()` only re-renders components when the tour's state changes.
diff --git a/demos/react-native/App.tsx b/demos/react-native/App.tsx
index da4daa7..78f787b 100644
--- a/demos/react-native/App.tsx
+++ b/demos/react-native/App.tsx
@@ -1,4 +1,4 @@
-import {type ComponentRef, createContext, createRef, type ReactNode, use, useState} from 'react';
+import {type ComponentRef, createContext, createRef, type ReactNode, use, useState, useSyncExternalStore} from 'react';
 import {StatusBar} from 'expo-status-bar';
 import {FlatList, Pressable, ScrollView, StyleSheet, Switch, Text, View} from 'react-native';
 import {SafeAreaProvider, useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -49,6 +49,53 @@ function on(screen: keyof Screens, step: TourStep): TourStep {
   };
 }
 
+type Order = {readonly id: number; readonly table: string; readonly items: string};
+type OrdersState = {readonly orders: readonly Order[]; readonly isLoading: boolean};
+
+const sampleOrders: readonly Order[] = [
+  {id: 1, table: 'Table 4', items: '2 × Pasta, 1 × Salad'},
+  {id: 2, table: 'Table 7', items: '3 × Pizza'},
+  {id: 3, table: 'Terrace 2', items: '1 × Soup, 2 × Lemonade'},
+];
+
+/** How long the demo's "server" takes to answer. */
+const ordersServerMs = 1500;
+
+/** Recent orders, as if from a server: refreshing them takes a moment. */
+let ordersState: OrdersState = {orders: sampleOrders, isLoading: false};
+const ordersListeners = new Set<() => void>();
+
+function setOrdersState(next: OrdersState): void {
+  ordersState = next;
+  for (const listener of ordersListeners) {
+    listener();
+  }
+}
+
+function subscribeToOrders(listener: () => void): () => void {
+  ordersListeners.add(listener);
+  return () => {
+    ordersListeners.delete(listener);
+  };
+}
+
+/** Loads the orders again; resolves once they are there. */
+async function refreshOrders(): Promise<void> {
+  setOrdersState({...ordersState, isLoading: true});
+  await new Promise((resolve) => {
+    setTimeout(resolve, ordersServerMs);
+  });
+  setOrdersState({orders: sampleOrders, isLoading: false});
+}
+
+function useOrders(): OrdersState {
+  return useSyncExternalStore(
+    subscribeToOrders,
+    () => ordersState,
+    () => ordersState,
+  );
+}
+
 const demoTour: TourStep[] = [
   on('Home', {
     target: 'header',
@@ -66,6 +113,15 @@ const demoTour: TourStep[] = [
     content: 'The tooltip picks the side with room and never leaves the safe area.',
     placement: 'top',
   }),
+  {
+    target: 'orders',
+    title: 'Waits for your data',
+    content: 'onBeforeStep refreshed these orders first. While that took a moment, the tour showed a spinner.',
+    async onBeforeStep() {
+      show('Home');
+      await refreshOrders();
+    },
+  },
   on('Home', {
     target: 'integration-last',
     title: 'Horizontal lists',
@@ -242,6 +298,21 @@ function Integrations(): ReactNode {
   );
 }
 
+function RecentOrders(): ReactNode {
+  const ref = useTourTarget('orders');
+  const {orders, isLoading} = useOrders();
+  return (
+    <View ref={ref} style={styles.card}>
+      <Text style={styles.cardTitle}>Recent orders{isLoading ? ' · updating…' : ''}</Text>
+      {orders.map((order) => (
+        <Text key={order.id} style={styles.cardText}>
+          <Text style={styles.orderTable}>{order.table}</Text> {order.items}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
 function HomeScreen(): ReactNode {
   const {startTour, isActive, currentStep, steps} = useTour();
   // A ref the app already has: pass it in.
@@ -292,6 +363,8 @@ function HomeScreen(): ReactNode {
           description="Screen-reader focus moves to the tooltip, the back button closes the tour."
         />
 
+        <RecentOrders />
+
         <Text style={styles.sectionTitle}>Integrations</Text>
       </View>
       <Integrations />
@@ -480,6 +553,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     lineHeight: 20,
   },
+  orderTable: {
+    fontWeight: '600',
+    color: '#f9fafb',
+  },
   integrations: {
     gap: 12,
     paddingHorizontal: 24,
diff --git a/demos/react/src/App.css b/demos/react/src/App.css
index a114b89..a5193a8 100644
--- a/demos/react/src/App.css
+++ b/demos/react/src/App.css
@@ -156,6 +156,39 @@
   border-radius: 12px;
 }
 
+.orders-section {
+  max-width: 480px;
+  margin: 0 auto 3rem;
+  padding: 1.5rem 2rem;
+  background: #f8f9fa;
+  border-radius: 12px;
+}
+
+.orders-section h2 {
+  margin: 0 0 1rem;
+  font-size: 1.25rem;
+}
+
+.orders {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.orders li {
+  padding: 0.5rem 0;
+  color: #666;
+}
+
+.orders li + li {
+  border-top: 1px solid #e2e8f0;
+}
+
+.orders strong {
+  margin-right: 0.5rem;
+  color: #333;
+}
+
 .install-section h2 {
   margin: 0 0 1rem;
   font-size: 1.5rem;
@@ -334,10 +367,24 @@
     color: #a0aec0;
   }
 
-  .install-section {
+  .install-section,
+  .orders-section {
     background: #2d3748;
   }
 
+  .orders-section h2,
+  .orders strong {
+    color: #f7fafc;
+  }
+
+  .orders li {
+    color: #a0aec0;
+  }
+
+  .orders li + li {
+    border-top-color: #4a5568;
+  }
+
   .install-section h2 {
     color: #f7fafc;
   }
diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx
index 9601c99..fa4590f 100644
--- a/demos/react/src/App.tsx
+++ b/demos/react/src/App.tsx
@@ -2,6 +2,7 @@ import {type ReactNode, useEffect, useState} from 'react';
 import {BrowserRouter, Link, Route, Routes, useNavigate} from 'react-router-dom';
 import {TourProvider, type TourTheme, type TourTooltipProps, useTour} from '@robertlinde/react-tour-kit/react';
 import {Lab} from './lab.tsx';
+import {useOrders} from './orders.ts';
 import {createDemoTour} from './tour.tsx';
 import './App.css';
 
@@ -116,6 +117,7 @@ function Navigation({
 function HomePage(): ReactNode {
   const {startTour, isActive, currentStep, steps} = useTour();
   const navigate = useNavigate();
+  const {orders, isLoading} = useOrders();
 
   return (
     <div className="page">
@@ -146,6 +148,17 @@ function HomePage(): ReactNode {
           </div>
         </section>
 
+        <section className="orders-section" data-tour="orders">
+          <h2>Recent orders{isLoading ? ' · updating…' : ''}</h2>
+          <ul className="orders">
+            {orders.map((order) => (
+              <li key={order.id}>
+                <strong>{order.table}</strong> {order.items}
+              </li>
+            ))}
+          </ul>
+        </section>
+
         <section className="cta-section">
           <button
             type="button"
diff --git a/demos/react/src/orders.ts b/demos/react/src/orders.ts
new file mode 100644
index 0000000..23048d4
--- /dev/null
+++ b/demos/react/src/orders.ts
@@ -0,0 +1,49 @@
+import {useSyncExternalStore} from 'react';
+
+/** Recent orders, as if from a server: refreshing them takes a moment. */
+export type Order = {readonly id: number; readonly table: string; readonly items: string};
+
+type OrdersState = {readonly orders: readonly Order[]; readonly isLoading: boolean};
+
+const sampleOrders: readonly Order[] = [
+  {id: 1, table: 'Table 4', items: '2 × Pasta, 1 × Salad'},
+  {id: 2, table: 'Table 7', items: '3 × Pizza'},
+  {id: 3, table: 'Terrace 2', items: '1 × Soup, 2 × Lemonade'},
+];
+
+/** How long the demo's "server" takes to answer. */
+const serverMs = 1500;
+
+let state: OrdersState = {orders: sampleOrders, isLoading: false};
+const listeners = new Set<() => void>();
+
+function update(next: OrdersState): void {
+  state = next;
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** Loads the orders again; resolves once they are there. */
+export async function refreshOrders(): Promise<void> {
+  update({...state, isLoading: true});
+  await new Promise((resolve) => {
+    setTimeout(resolve, serverMs);
+  });
+  update({orders: sampleOrders, isLoading: false});
+}
+
+export function useOrders(): OrdersState {
+  return useSyncExternalStore(
+    subscribe,
+    () => state,
+    () => state,
+  );
+}
diff --git a/demos/react/src/tour.tsx b/demos/react/src/tour.tsx
index e6e1277..bc24cde 100644
--- a/demos/react/src/tour.tsx
+++ b/demos/react/src/tour.tsx
@@ -1,4 +1,5 @@
 import type {TourStep} from '@robertlinde/react-tour-kit/react';
+import {refreshOrders} from './orders.ts';
 
 /**
  * A tour across two pages. Every step first opens the page it needs, so the tour also works when
@@ -36,6 +37,15 @@ export function createDemoTour(navigate: (path: string) => void): TourStep[] {
       content: 'Asked for the right side; flips automatically when there is no room.',
       placement: 'right',
     }),
+    {
+      target: '[data-tour="orders"]',
+      title: 'Waits for your data',
+      content: 'onBeforeStep refreshed these orders first. While that took a moment, the tour showed a spinner.',
+      async onBeforeStep() {
+        open('/');
+        await refreshOrders();
+      },
+    },
     on('/', {
       target: '[data-tour="install"]',
       title: 'Below the fold',
diff --git a/src/react-native-platform/layer/native-renderer.tsx b/src/react-native-platform/layer/native-renderer.tsx
index 3f11831..d5e57ef 100644
--- a/src/react-native-platform/layer/native-renderer.tsx
+++ b/src/react-native-platform/layer/native-renderer.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react';
 import {
   AccessibilityInfo,
+  ActivityIndicator,
   Animated,
   BackHandler,
   Easing,
@@ -46,6 +47,7 @@ import type {
   TextPartProps,
   TooltipFrameProps,
   TourRenderer,
+  WaitingProps,
 } from '../../shared/renderer/renderer.type.js';
 
 const emptySize: Size = {width: 0, height: 0};
@@ -512,6 +514,36 @@ function TooltipFrame({children, layout, entrance, isBusy, isHidden, onSize, onI
   );
 }
 
+/** A spinner in the middle of the layer, faded in on the UI thread; presses go through to the dimmed area. */
+function Waiting({label, theme}: WaitingProps): ReactNode {
+  const [opacity] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    const animation = Animated.timing(opacity, {
+      toValue: 1,
+      duration: motion.fadeInMs,
+      easing: standardEasing,
+      useNativeDriver,
+    });
+    animation.start();
+    return (): void => {
+      animation.stop();
+    };
+  }, [opacity]);
+
+  return (
+    <View pointerEvents="none" style={[StyleSheet.absoluteFill, styles.waitingLayer]}>
+      <Animated.View
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityLabel={label}
+        style={[styles.card, styles.waitingCard, {backgroundColor: theme.tooltipBackground, opacity}]}
+      >
+        <ActivityIndicator color={theme.primaryColor} />
+      </Animated.View>
+    </View>
+  );
+}
+
 function MeasureFrame({children, maxWidth, maxHeight, onSize}: MeasureFrameProps): ReactNode {
   return (
     <View
@@ -728,7 +760,7 @@ const card: CardParts = {
 };
 
 /** How React Native draws the tour. */
-export const nativeRenderer: TourRenderer = {Layer, Backdrop, Spotlight, TooltipFrame, MeasureFrame, card};
+export const nativeRenderer: TourRenderer = {Layer, Backdrop, Spotlight, TooltipFrame, MeasureFrame, Waiting, card};
 
 const styles = StyleSheet.create({
   piece: {position: 'absolute', top: 0, left: 0},
@@ -737,6 +769,8 @@ const styles = StyleSheet.create({
   verticalBar: {width: ringWidth, height: barLength},
   hidden: {opacity: 0},
   measure: {position: 'absolute', top: 0, left: 0, opacity: 0},
+  waitingLayer: {alignItems: 'center', justifyContent: 'center'},
+  waitingCard: {width: 56, height: 56, alignItems: 'center', justifyContent: 'center'},
   card: {
     borderRadius: 14,
     ...Platform.select({
diff --git a/src/react-platform/layer/styles.ts b/src/react-platform/layer/styles.ts
index 022fb74..1eba9d7 100644
--- a/src/react-platform/layer/styles.ts
+++ b/src/react-platform/layer/styles.ts
@@ -252,9 +252,49 @@ export const tourCss = `
   }
 }
 
+/* While a step takes a while to prepare: a spinner in the middle, on the tooltip's background. */
+.rtk-waiting {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  translate: -50% -50%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin: 0 !important;
+  border-radius: var(--rtk-radius);
+  background: var(--rtk-bg);
+  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.35), 0 4px 12px -6px rgba(15, 23, 42, 0.2);
+  pointer-events: none !important;
+  animation: rtk-fade-in var(--rtk-fade-duration, 200ms) var(--rtk-ease) both;
+}
+.rtk-spinner {
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(127, 127, 127, 0.25);
+  border: 3px solid color-mix(in srgb, var(--rtk-primary) 20%, transparent);
+  border-top-color: var(--rtk-primary);
+  border-radius: 50%;
+  animation: rtk-spin 0.8s linear infinite;
+}
+@keyframes rtk-fade-in {
+  from { opacity: 0; }
+}
+@keyframes rtk-spin {
+  to { rotate: 1turn; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rtk-spinner { animation-duration: 2s; }
+}
+
 @media (forced-colors: active) {
   .rtk-spotlight { outline: 3px solid Highlight; }
-  .rtk-card { border: 1px solid CanvasText; }
+  .rtk-card, .rtk-waiting { border: 1px solid CanvasText; }
+  .rtk-spinner { border-color: GrayText; border-top-color: Highlight; }
   /* Without backgrounds, a border is what shows a button is one. */
   .rtk-button { border: 1px solid ButtonText !important; }
   .rtk-button:disabled { border-color: GrayText !important; }
diff --git a/src/react-platform/layer/web-renderer.tsx b/src/react-platform/layer/web-renderer.tsx
index 4b27bbe..2e3fee6 100644
--- a/src/react-platform/layer/web-renderer.tsx
+++ b/src/react-platform/layer/web-renderer.tsx
@@ -28,6 +28,7 @@ import type {
   TextPartProps,
   TooltipFrameProps,
   TourRenderer,
+  WaitingProps,
 } from '../../shared/renderer/renderer.type.js';
 import {handlesKey, pageDirection} from '../dom/elements.util.js';
 import {keepReachable} from '../dom/keep-reachable.util.js';
@@ -473,6 +474,15 @@ function TooltipFrame({children, layout, entrance, isBusy, isHidden, onSize}: To
   );
 }
 
+/** A spinner in the middle of the screen; presses go through to the dimmed area. */
+function Waiting({label}: WaitingProps): ReactNode {
+  return (
+    <div className="rtk-waiting" role="progressbar" aria-label={label}>
+      <span aria-hidden="true" className="rtk-spinner" />
+    </div>
+  );
+}
+
 function MeasureFrame({children, maxWidth, maxHeight, onSize}: MeasureFrameProps): ReactNode {
   const ref = useRef<HTMLDivElement | null>(null);
   useIsomorphicLayoutEffect(() => {
@@ -611,4 +621,4 @@ const card: CardParts = {
 };
 
 /** How the web draws the tour. */
-export const webRenderer: TourRenderer = {Layer, Backdrop, Spotlight, TooltipFrame, MeasureFrame, card};
+export const webRenderer: TourRenderer = {Layer, Backdrop, Spotlight, TooltipFrame, MeasureFrame, Waiting, card};
diff --git a/src/shared/renderer/motion.ts b/src/shared/renderer/motion.ts
index bf9ebd9..c71656e 100644
--- a/src/shared/renderer/motion.ts
+++ b/src/shared/renderer/motion.ts
@@ -17,8 +17,11 @@ export const motion = {
   /** Distance (from the target's side) and scale the tooltip enters from. */
   enterOffset: 6,
   enterScale: 0.96,
-  /** If the first step takes longer than this to prepare (navigation, data), the screen is dimmed meanwhile. */
-  waitingDimDelayMs: 300,
+  /**
+   * If a step takes longer than this to prepare (navigation, data, a target that is still
+   * rendering), the tour shows that it is waiting: the highlight closes and a spinner appears.
+   */
+  waitingDelayMs: 300,
   /** Control points of the standard easing curve (`cubic-bezier`). */
   easing: [0.2, 0, 0, 1],
 } as const;
diff --git a/src/shared/renderer/renderer.type.ts b/src/shared/renderer/renderer.type.ts
index d320e14..89e52e3 100644
--- a/src/shared/renderer/renderer.type.ts
+++ b/src/shared/renderer/renderer.type.ts
@@ -25,6 +25,8 @@ export type TourRenderer = {
   readonly TooltipFrame: ComponentType<TooltipFrameProps>;
   /** Renders a tooltip invisibly with given size limits and reports its size. */
   readonly MeasureFrame: ComponentType<MeasureFrameProps>;
+  /** A spinner in the middle of the layer, while the tour waits for a step that takes a while to prepare. */
+  readonly Waiting: ComponentType<WaitingProps>;
   /** The pieces of the built-in tooltip card. */
   readonly card: CardParts;
 };
@@ -104,6 +106,12 @@ export type Entrance = {
   readonly delayMs: number;
 };
 
+export type WaitingProps = {
+  /** Accessible name of the spinner. */
+  readonly label: string;
+  readonly theme: ResolvedTheme;
+};
+
 export type MeasureFrameProps = {
   readonly children: ReactNode;
   readonly maxWidth: number;
diff --git a/src/shared/renderer/tour-overlay.tsx b/src/shared/renderer/tour-overlay.tsx
index 1b77ab2..0f9daf2 100644
--- a/src/shared/renderer/tour-overlay.tsx
+++ b/src/shared/renderer/tour-overlay.tsx
@@ -86,14 +86,17 @@ function OverlayContent({
   isClosing,
   onClosed,
 }: OverlayContentProps): ReactNode {
-  const {Layer, Backdrop, Spotlight} = renderer;
+  const {Layer, Backdrop, Spotlight, Waiting} = renderer;
   const id = useId();
   const titleId = `${id}title`;
   const descriptionId = `${id}description`;
   const {shown, phase, measure} = view;
   const totalSteps = view.steps.length;
   // The first step can take a while (navigation in onBeforeStep): dim the screen after a moment.
-  const isWaitingDimmed = useDelayedFlag(!shown && !isClosing, motion.waitingDimDelayMs);
+  const isWaitingDimmed = useDelayedFlag(!shown && !isClosing, motion.waitingDelayMs);
+  // Preparing a step takes a while: the highlight closes and a spinner shows that the tour is waiting.
+  const isPreparing = phase === 'preparing' && !isClosing;
+  const isWaiting = useDelayedFlag(isPreparing, motion.waitingDelayMs);
   // Once on screen, the overlay stays until the tour ends (also when another tour takes over).
   const [hasBeenVisible, setHasBeenVisible] = useState(false);
   const isShowingSomething = shown !== undefined || isWaitingDimmed;
@@ -107,8 +110,8 @@ function OverlayContent({
   useEffect(() => {
     visibleSince.current = isVisible ? Date.now() : undefined;
   }, [isVisible]);
-  const spotlight = useSpotlight(view, isVisible, isReducedMotion);
-  const announcement = useAnnouncement(shown, totalSteps, i18n, isClosing);
+  const spotlight = useSpotlight(view, isVisible, isReducedMotion, isWaiting);
+  const announcement = useAnnouncement(view, i18n, isClosing, isWaiting);
 
   // Fade out, then unmount.
   useEffect(() => {
@@ -155,10 +158,11 @@ function OverlayContent({
 
   const onBackdropPress = (point: Point): void => {
     // Not while the overlay is still appearing (a double click on the button that started the
-    // tour), nor while a step change is under way (a second tap on Next falls through the busy tooltip).
+    // tour), nor right after a step change began (a second tap on Next falls through the busy
+    // tooltip). Once the tour shows that it is waiting, a press leaves it.
     const since = visibleSince.current;
     const hasFadedIn = since !== undefined && Date.now() - since >= motion.fadeInMs;
-    const isChangingStep = shown !== undefined && phase !== 'showing';
+    const isChangingStep = shown !== undefined && phase !== 'showing' && !isWaiting;
     if (!isOverlayDismissible || isClosing || !hasFadedIn || isChangingStep) {
       return;
     }
@@ -170,9 +174,6 @@ function OverlayContent({
   };
 
   const context = useMemo<RendererContextValue>(() => ({renderer, theme, i18n}), [renderer, theme, i18n]);
-  const counter = shown
-    ? formatTemplate(i18n.stepCounterTemplate, {current: shown.stepIndex + 1, total: totalSteps})
-    : '';
 
   return (
     <RendererContext.Provider value={context}>
@@ -184,7 +185,7 @@ function OverlayContent({
         theme={theme}
         titleId={shown ? titleId : undefined}
         descriptionId={shown ? descriptionId : undefined}
-        fallbackLabel={(shown ? textOf(shown.step.title) : '') || counter}
+        fallbackLabel={fallbackLabelOf(shown, totalSteps, i18n)}
         announcement={announcement}
         stepKey={shown?.transitionId}
         onIntent={onIntent}
@@ -199,8 +200,8 @@ function OverlayContent({
             Tooltip={Tooltip}
             shown={shown}
             totalSteps={totalSteps}
-            isBusy={phase === 'preparing' && !isClosing}
-            isHidden={phase === 'revealing'}
+            isBusy={isPreparing}
+            isHidden={phase === 'revealing' || isWaiting}
             isDelayed={spotlight.isMorphing}
             isReducedMotion={isReducedMotion}
             titleId={titleId}
@@ -208,6 +209,7 @@ function OverlayContent({
             onIntent={onIntent}
           />
         ) : null}
+        {isWaiting ? <Waiting label={i18n.loadingAriaLabel} theme={theme} /> : null}
         {measure && !isClosing ? (
           <MeasuredTooltip
             key={measure.id}
@@ -365,20 +367,46 @@ type SpotlightState = {
   readonly isMorphing: boolean;
 };
 
+/** What the spotlight marks, and the key under which a move there is animated. */
+function spotlightTarget(
+  view: TourViewState,
+  isWaiting: boolean,
+): {readonly hole: Box | undefined; readonly key: string} {
+  const {shown, phase, revealHighlight} = view;
+  const shownKey = shown?.transitionId ?? 'none';
+  // While the tour waits for a step, nothing is highlighted: the hole closes.
+  if (isWaiting) {
+    return {hole: undefined, key: `waiting:${shownKey}`};
+  }
+
+  if (phase === 'revealing') {
+    return {
+      hole: revealHighlight ? inflate(revealHighlight, tourLayout.highlightPadding) : undefined,
+      key: `reveal:${shownKey}`,
+    };
+  }
+
+  const hole = shown?.highlight ? inflate(shown.highlight, tourLayout.highlightPadding) : undefined;
+  return {hole, key: `${shownKey}:${hole ? 'open' : 'closed'}`};
+}
+
 /**
  * Where the spotlight's hole is and how it gets there. While the next target is scrolled into
  * view, the hole goes with it (frame by frame, or straight to where it will end up); otherwise it
  * marks the step on screen. Moving to another step is animated; following a target that moves on
  * its own (layout changes, resizing) is instant, like the tooltip, also while the spotlight is
- * still on its way. Nothing animates before the overlay has appeared.
+ * still on its way. While the tour waits for a step, the hole closes. Nothing animates before the
+ * overlay has appeared.
  */
-function useSpotlight(view: TourViewState, isVisible: boolean, isReducedMotion: boolean): SpotlightState {
-  const {shown, phase, revealHighlight, followsScroll} = view;
+function useSpotlight(
+  view: TourViewState,
+  isVisible: boolean,
+  isReducedMotion: boolean,
+  isWaiting: boolean,
+): SpotlightState {
+  const {phase, followsScroll} = view;
   const isRevealing = phase === 'revealing';
-  const source = isRevealing ? revealHighlight : shown?.highlight;
-  const hole = source ? inflate(source, tourLayout.highlightPadding) : undefined;
-  const shownKey = shown?.transitionId ?? 'none';
-  const key = isRevealing ? `reveal:${shownKey}` : `${shownKey}:${hole ? 'open' : 'closed'}`;
+  const {hole, key} = spotlightTarget(view, isWaiting);
 
   // The key at which the overlay appeared: it appears in place, later changes animate.
   const [appearedAtKey, setAppearedAtKey] = useState<string | undefined>(undefined);
@@ -409,26 +437,37 @@ function useSpotlight(view: TourViewState, isVisible: boolean, isReducedMotion:
 }
 
 /** "2 of 5: Title" when the step changes (the first step is announced by the tour appearing). */
-function useAnnouncement(
-  shown: ShownStep | undefined,
-  totalSteps: number,
-  i18n: ResolvedI18n,
-  isClosing: boolean,
-): string {
+function useAnnouncement(view: TourViewState, i18n: ResolvedI18n, isClosing: boolean, isWaiting: boolean): string {
+  const {shown, phase} = view;
   const [firstKey, setFirstKey] = useState<number | undefined>(undefined);
   if (shown && firstKey === undefined) {
     setFirstKey(shown.transitionId);
   }
 
-  if (!shown || isClosing || shown.transitionId === firstKey) {
+  // While the tour waits for a step, that is what is said; a step once it is on screen.
+  if (isWaiting) {
+    return i18n.loadingAriaLabel;
+  }
+
+  if (!shown || isClosing || phase !== 'showing' || shown.transitionId === firstKey) {
     return '';
   }
 
-  const counter = formatTemplate(i18n.stepCounterTemplate, {current: shown.stepIndex + 1, total: totalSteps});
+  const counter = formatTemplate(i18n.stepCounterTemplate, {current: shown.stepIndex + 1, total: view.steps.length});
   const title = textOf(shown.step.title);
   return title ? `${counter}: ${title}` : counter;
 }
 
+/** Name of the tour dialog for a custom tooltip without a title element: the step's title, or its counter. */
+function fallbackLabelOf(shown: ShownStep | undefined, totalSteps: number, i18n: ResolvedI18n): string {
+  if (!shown) {
+    return '';
+  }
+
+  const counter = formatTemplate(i18n.stepCounterTemplate, {current: shown.stepIndex + 1, total: totalSteps});
+  return textOf(shown.step.title) || counter;
+}
+
 /** The plain text of React content (strings, numbers, arrays and the children of elements). */
 export function textOf(node: ReactNode): string {
   if (typeof node === 'string' || typeof node === 'number') {
diff --git a/src/shared/types/tour-i18n.type.ts b/src/shared/types/tour-i18n.type.ts
index 828cb10..3b51069 100644
--- a/src/shared/types/tour-i18n.type.ts
+++ b/src/shared/types/tour-i18n.type.ts
@@ -1,4 +1,4 @@
-/** Texts of the built-in tooltip. Every key is optional. */
+/** Texts of the tour (most of them in the built-in tooltip). Every key is optional. */
 export type TourI18n = {
   /** @defaultValue `'Next'` */
   readonly nextLabel?: string;
@@ -12,4 +12,6 @@ export type TourI18n = {
   readonly closeAriaLabel?: string;
   /** Accessible name of each step dot; `{step}` and `{total}` are replaced. @defaultValue `'Go to step {step}'` */
   readonly dotAriaLabelTemplate?: string;
+  /** Accessible name of the spinner shown while a step takes a while to prepare. @defaultValue `'Loading…'` */
+  readonly loadingAriaLabel?: string;
 };
diff --git a/src/shared/utils/i18n.util.ts b/src/shared/utils/i18n.util.ts
index 845ec23..29db60e 100644
--- a/src/shared/utils/i18n.util.ts
+++ b/src/shared/utils/i18n.util.ts
@@ -9,6 +9,7 @@ export const defaultI18n: ResolvedI18n = {
   stepCounterTemplate: '{current} of {total}',
   closeAriaLabel: 'Close tour',
   dotAriaLabelTemplate: 'Go to step {step}',
+  loadingAriaLabel: 'Loading…',
 };
 
 const i18nKeys = [
@@ -18,6 +19,7 @@ const i18nKeys = [
   'stepCounterTemplate',
   'closeAriaLabel',
   'dotAriaLabelTemplate',
+  'loadingAriaLabel',
 ] as const satisfies ReadonlyArray<keyof TourI18n>;
 
 export function resolveI18n(i18n: TourI18n | undefined): ResolvedI18n {
diff --git a/test/e2e/tour.spec.ts b/test/e2e/tour.spec.ts
index 3575c5f..d9a23d2 100644
--- a/test/e2e/tour.spec.ts
+++ b/test/e2e/tour.spec.ts
@@ -24,6 +24,11 @@ test('runs the whole cross-page tour', async ({page}) => {
   await startTour(page);
   await next(page, 'Highlight anything');
   await next(page, 'Smart placement');
+  // onBeforeStep refreshes the orders first: the tour shows a spinner, and no highlight, meanwhile.
+  await page.getByRole('button', {name: 'Next'}).click();
+  await expect(page.getByRole('progressbar', {name: 'Loading…'})).toBeVisible();
+  await expect(page.getByRole('dialog', {name: 'Waits for your data'})).toBeVisible();
+  await expect(page.getByRole('progressbar')).toHaveCount(0);
   await next(page, 'Below the fold');
   await expect(page.locator('[data-tour="install"]')).toBeInViewport({ratio: 1});
   await next(page, 'Across pages');
@@ -55,7 +60,13 @@ test('gives focus back to the button that started the tour', async ({page}) => {
 
 test('navigates back across pages', async ({page}) => {
   await startTour(page);
-  for (const title of ['Highlight anything', 'Smart placement', 'Below the fold', 'Across pages']) {
+  for (const title of [
+    'Highlight anything',
+    'Smart placement',
+    'Waits for your data',
+    'Below the fold',
+    'Across pages',
+  ]) {
     await next(page, title);
   }
 
@@ -65,16 +76,16 @@ test('navigates back across pages', async ({page}) => {
 
 test('going back keeps the target clear of the sticky navigation', async ({page}) => {
   await startTour(page);
-  for (const title of ['Highlight anything', 'Smart placement', 'Below the fold']) {
+  for (const title of ['Highlight anything', 'Smart placement', 'Waits for your data', 'Below the fold']) {
     await next(page, title);
   }
 
   await page.getByRole('button', {name: 'Back'}).click();
-  await expect(page.getByRole('dialog', {name: 'Smart placement'})).toBeVisible();
+  await expect(page.getByRole('dialog', {name: 'Waits for your data'})).toBeVisible();
   await expect(tooltip(page)).not.toHaveAttribute('data-entering');
   const {navBottom, targetTop} = await page.evaluate(() => ({
     navBottom: document.querySelector('.nav')!.getBoundingClientRect().bottom,
-    targetTop: document.querySelector('[data-tour="feature-1"]')!.getBoundingClientRect().top,
+    targetTop: document.querySelector('[data-tour="orders"]')!.getBoundingClientRect().top,
   }));
   expect(targetTop).toBeGreaterThanOrEqual(navBottom);
 });
diff --git a/test/maestro/back.yaml b/test/maestro/back.yaml
index 6b6a3a8..7fe0faa 100644
--- a/test/maestro/back.yaml
+++ b/test/maestro/back.yaml
@@ -13,14 +13,47 @@ name: Goes back across screens
 - extendedWaitUntil:
     visible: 'Welcome to react-tour-kit'
     timeout: 10000
-- repeat:
-    times: 7
-    commands:
-      - tapOn:
-          id: 'rtk-next'
-      - waitForAnimationToEnd
+# One step at a time: Next is ignored while the tour waits for a step (one of them loads data first).
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Highlight anything'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Smart placement'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Waits for your data'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Horizontal lists'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Below the fold'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Across screens'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
+- extendedWaitUntil:
+    visible: 'Long lists'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
 - extendedWaitUntil:
     visible: 'Modal screens'
+    timeout: 10000
 - tapOn:
     id: 'rtk-prev'
 - extendedWaitUntil:
@@ -39,6 +72,11 @@ name: Goes back across screens
     visible: 'Horizontal lists'
 - tapOn:
     id: 'rtk-prev'
+- extendedWaitUntil:
+    visible: 'Waits for your data'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-prev'
 - extendedWaitUntil:
     visible: 'Smart placement'
 - tapOn:
diff --git a/test/maestro/close.yaml b/test/maestro/close.yaml
index 88a04db..6faed8f 100644
--- a/test/maestro/close.yaml
+++ b/test/maestro/close.yaml
@@ -31,7 +31,7 @@ name: Closes on outside tap, custom tooltip
     visible: 'Welcome to react-tour-kit'
     timeout: 10000
 - assertVisible: 'Skip'
-- assertVisible: '1/9'
+- assertVisible: '1/10'
 - tapOn: 'Skip'
 - extendedWaitUntil:
     notVisible: 'Welcome to react-tour-kit'
diff --git a/test/maestro/tour.yaml b/test/maestro/tour.yaml
index 9be3b2c..731da1c 100644
--- a/test/maestro/tour.yaml
+++ b/test/maestro/tour.yaml
@@ -17,7 +17,7 @@ name: Runs the whole tour
 - extendedWaitUntil:
     visible: 'Welcome to react-tour-kit'
     timeout: 10000
-- assertVisible: '1 of 9'
+- assertVisible: '1 of 10'
 - tapOn:
     id: 'rtk-next'
 - extendedWaitUntil:
@@ -28,6 +28,12 @@ name: Runs the whole tour
     visible: 'Smart placement'
 - tapOn:
     id: 'rtk-next'
+# The step's onBeforeStep loads data first: a spinner shows meanwhile.
+- extendedWaitUntil:
+    visible: 'Waits for your data'
+    timeout: 10000
+- tapOn:
+    id: 'rtk-next'
 - extendedWaitUntil:
     visible: 'Horizontal lists'
 - tapOn:
@@ -50,7 +56,7 @@ name: Runs the whole tour
     id: 'rtk-next'
 - extendedWaitUntil:
     visible: "That's it!"
-- assertVisible: '9 of 9'
+- assertVisible: '10 of 10'
 - tapOn:
     id: 'rtk-next'
 - extendedWaitUntil:
diff --git a/test/native/tour-behavior.test.tsx b/test/native/tour-behavior.test.tsx
index b057c6d..0a20caa 100644
--- a/test/native/tour-behavior.test.tsx
+++ b/test/native/tour-behavior.test.tsx
@@ -23,7 +23,13 @@ function element(testId: string): HTMLElement {
   return found;
 }
 
-const tooltip = (): HTMLElement | null => document.querySelector<HTMLElement>('[data-testid="rtk-tooltip"]');
+function tooltip(): HTMLElement | null {
+  const frame = document.querySelector<HTMLElement>('[data-testid="rtk-tooltip"]');
+  // Hidden (kept for its size, its container transparent) while the tour scrolls to the next target
+  // or waits for it: not on screen.
+  const container = frame?.parentElement;
+  return container && getComputedStyle(container).opacity === '0' ? null : frame;
+}
 
 function Target({id, style}: {readonly id: string; readonly style?: {readonly marginLeft?: number}}): ReactNode {
   const ref = useTourTarget(id);
diff --git a/test/support/tour-behavior.suite.tsx b/test/support/tour-behavior.suite.tsx
index 3d01770..a6cc6f4 100644
--- a/test/support/tour-behavior.suite.tsx
+++ b/test/support/tour-behavior.suite.tsx
@@ -3,6 +3,7 @@ import {afterEach, describe, expect, it, vi} from 'vitest';
 import {page} from 'vitest/browser';
 import type {Insets} from '../../src/shared/geometry/geometry.type.js';
 import type {TourProviderBaseProps} from '../../src/shared/react/tour-provider-core.js';
+import {motion} from '../../src/shared/renderer/motion.js';
 import {useTour} from '../../src/shared/react/use-tour.hook.js';
 import type {TourContextType} from '../../src/shared/types/tour-context.type.js';
 import type {TourEndInfo, TourEndReason} from '../../src/shared/types/tour-end-info.type.js';
@@ -235,6 +236,39 @@ export function describeTourBehavior(harness: TourBehaviorHarness): void {
       expect(startedTour().currentStep).toBe(1);
     });
 
+    it('shows a spinner, and no highlight, while the next step takes a moment to prepare', async () => {
+      await renderScreen();
+      const gate = deferred();
+      startedTour().startTour([steps[0]!, {...steps[1]!, onBeforeStep: async () => gate.promise}], 'intro');
+      await harness.waitForStep('First step');
+      const spinner = page.getByRole('progressbar', {name: 'Loading…'});
+      await page.getByRole('button', {name: 'Next'}).click();
+      // A quick step change shows nothing.
+      await sleep(motion.waitingDelayMs / 2);
+      expect(spinner.query()).toBeNull();
+      await expect.element(spinner).toBeVisible();
+      expect(harness.tooltip()).toBeNull();
+      gate.resolve();
+      await harness.waitForStep('Second step');
+      expect(spinner.query()).toBeNull();
+    });
+
+    it('can be left while it waits for a step, with a press on the dimmed area', async () => {
+      const onTourEnd = vi.fn<(id: string | undefined, info: TourEndInfo) => void>();
+      await renderScreen({onTourEnd});
+      startedTour().startTour([steps[0]!, {...steps[1]!, onBeforeStep: async () => deferred().promise}], 'intro');
+      await harness.waitForStep('First step');
+      // Where the first step's highlight was: it has closed, so this is the dimmed area now.
+      const target = harness.rectOf('first');
+      await page.getByRole('button', {name: 'Next'}).click();
+      await expect.element(page.getByRole('progressbar', {name: 'Loading…'})).toBeVisible();
+      await sleep(motion.morphMs + 50);
+      await harness.pressAt({x: target.left + target.width / 2, y: target.top + target.height / 2});
+      await vi.waitFor(() => {
+        expect(onTourEnd).toHaveBeenCalledWith('intro', expect.objectContaining({reason: 'blur'}));
+      });
+    });
+
     it('stays open when the dimmed area is pressed with closeOnOverlayClick={false}', async () => {
       await renderScreen({closeOnOverlayClick: false});
       startedTour().startTour(steps);
diff --git a/test/web/tour-overlay.test.tsx b/test/web/tour-overlay.test.tsx
index f0b3dd3..5c83076 100644
--- a/test/web/tour-overlay.test.tsx
+++ b/test/web/tour-overlay.test.tsx
@@ -70,6 +70,7 @@ const renderer: TourRenderer = {
   Spotlight: RecordingSpotlight,
   TooltipFrame: ReportsSize,
   MeasureFrame: ReportsSize,
+  Waiting: Nothing,
   card: {
     Card: Passthrough,
     Arrow: Nothing,