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.

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 fallback renders a desktop pill and mobile trigger that match the SearchBar's empty state appearance.

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.

Accepts all standard div element props.

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:

<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. On desktop (lg+), shows a pill-shaped bar with location, dates, and guests placeholders plus a search button. On mobile, shows a centered pill with a search icon and placeholder text. All copy is customizable via props with sensible English defaults.

SearchBarFallback