SearchBarFallback

A lightweight static placeholder for the SearchBar, used as a Suspense fallback or initial server render.

Installation

pnpm add @wandercom/design-system-web

Usage

The SearchBarFallback renders a static placeholder that visually matches the SearchBar's empty state. Wrap the real SearchBar in a Suspense boundary with the fallback to avoid layout shift during loading. By default the composed fallback establishes a 65rem (1040px) query container and switches layout from its own available width. Pass inheritContainer when its matching SearchBar follows an ancestor container.

11 lines
import { SearchBarFallback } from '@wandercom/design-system-web/ui/search-bar-fallback';
import { SearchBar } from '@wandercom/design-system-web/ui/search-bar';
import { Suspense } from 'react';

export function Example() {
  return (
    <Suspense fallback={<SearchBarFallback />}>
      <SearchBar />
    </Suspense>
  );
}

Examples

Default

The example renders the live SearchBar empty state and the fallback at the same available width so desktop and mobile alignment can be compared directly.

Loading example...

Props

SearchBarFallback

locationPlaceholder?:

string
Location placeholder text for the desktop view. Defaults to "Where".

datesPlaceholder?:

string
Dates placeholder text for the desktop view. Defaults to "When".

guestsPlaceholder?:

string
Guests placeholder text for the desktop view. Defaults to "Who".

searchLabel?:

string
Search button label for the desktop view. Defaults to "Search".

mobilePlaceholder?:

string
Placeholder text for the mobile trigger. Defaults to "Start your search".

className?:

string
Additional CSS classes to apply to the root container.

inheritContainer?:

boolean
When true, responsive visibility follows the nearest ancestor query container rather than establishing a new container on the fallback root.

Accepts all standard div element props.

SearchBarFallbackDesktop and SearchBarFallbackMobile are lower-level exports. When rendered independently, place them beneath an @container ancestor if their responsive visibility should adapt to a parent width.

SearchBarFallbackDesktop

locationPlaceholder?:

string
Location placeholder text. Defaults to "Where".

datesPlaceholder?:

string
Dates placeholder text. Defaults to "When".

guestsPlaceholder?:

string
Guests placeholder text. Defaults to "Who".

searchLabel?:

string
Search button label. Defaults to "Search".

className?:

string
Additional CSS classes to apply to the desktop fallback.

Accepts all standard div element props.

SearchBarFallbackMobile

placeholder?:

string
Placeholder text shown in the mobile trigger. Defaults to "Start your search".

className?:

string
Additional CSS classes to apply to the mobile fallback.

Accepts all standard div element props.

Localized Copy

All visible text can be customized via props to support localization:

7 lines
<SearchBarFallback
  locationPlaceholder="Où ?"
  datesPlaceholder="Quand ?"
  guestsPlaceholder="Combien ?"
  searchLabel="Rechercher"
  mobilePlaceholder="Commencer la recherche"
/>

Behavior

This component renders static HTML with no client-side JavaScript, hooks, or state. It works as a React Server Component. At container widths of 65rem (1040px) and wider, it shows a pill-shaped bar with location, dates, and guests placeholders plus a search button. Below that width, it shows a centered pill with a search icon and placeholder text. All copy is customizable via props with sensible English defaults.

SearchBarFallback