User Story
As a reader using Hybrid Search, when my search is in progress, I want to see a clear loading state that reflects the type of results being fetched, so that I understand the app is working and don’t assume the search failed or stalled.
Description
When a user executes a search in the Hybrid Search experiment, display a skeleton loading state and lightweight graphics that indicate results are being retrieved.
The loading state should:
- Acknowledge the user’s action immediately
- Match the structure of the expected results layout
- Avoid implying failure, empty results, or lack of coverage
This applies to both lexical and semantic retrieval paths.
Requirements
Trigger Conditions
- User presses Enter / Search or taps a search suggestion
- Hybrid Search request is initiated
Loading State Behavior
- A skeleton UI is displayed while results are loading
- Skeleton structure mirrors the final results layout:
- Vertical placeholders for lexical results
- Horizontal placeholders for semantic results (when applicable)
- Loading graphics are neutral and non-distracting
- No “no results” or error messaging is shown during loading
Transition to Results
- Skeleton state is replaced immediately when results return
- Partial loading states are handled gracefully (e.g., lexical returns before semantic)
- If semantic retrieval times out, fallback behavior applies without exposing errors
Scope
- Applies only to users in the Hybrid Search experiment
- Control group retains existing loading behavior
Note: Skeletons should not include real text, images, or misleading placeholders. Accessibility considerations (e.g. reduced motion) should be respected.
Design:
Gif highlighting behaviour:
Note: please use material design's skeleton loader https://m3.material.io/styles/motion/transitions/transition-patterns#b39a0641-1b44-4864-83f5-fac38e0bd94a - The Figma file was built using a custom component to represent the idea of a skeleton loader.
Copy and Layout: TBD