Transporter Room · Dynamic Loading
The two canonical wait scenarios: an element hidden until it's ready, and one absent from the DOM until it's ready.
Energize. The ensign materializes in 3 seconds — hidden first, non-existent second.
Dynamic Loading is a medium Waits & Dynamics challenge on Fun UI Playground. The two canonical wait scenarios: an element hidden until it's ready, and one absent from the DOM until it's ready. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “dynamic-loading-”, and the techniques it exercises are explicit waits, visibility vs presence, spinners, configurable delays.
At a glance
- Category
- Waits & Dynamics
- Difficulty
- medium
- Teaches
- explicit waits · visibility vs presence · spinners · configurable delays
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixeddynamic-loading-
Selectors on this page
| Locator | What it is |
|---|---|
#dynamic-loading-start-1 #dynamic-loading-finish-1 | Example 1: #dynamic-loading-start-1 → spinner → #dynamic-loading-finish-1 becomes visible (it was hidden, not absent) |
#dynamic-loading-start-2 #dynamic-loading-finish-2 | Example 2: #dynamic-loading-start-2 → spinner → #dynamic-loading-finish-2 is appended to the DOM |
[data-testid="dynamic-loading-spinner"] | Spinners use [data-testid="dynamic-loading-spinner"] and are removed when done |
Frequently asked questions
What is the difference between waiting for presence and waiting for visibility?
Presence means the element is in the DOM; visibility means it is also rendered. #dynamic-loading-finish-1 is present but hidden the whole time, so a presence wait resolves instantly and the assertion races the page. #dynamic-loading-finish-2 is appended only when the work finishes.
How do I make a timer-driven challenge fast in CI?
Add ?delay=500 to the URL. The default beam time is 3000 ms and the parameter shrinks it without changing the wait semantics being practised. The spinner is [data-testid="dynamic-loading-spinner"] and is removed when the transport completes.
More Waits & Dynamics
- Paddock Controls · Dynamic Controls
- Squad Bench · Add/Remove Elements
- Pizza Order Toasts · Notification Messages
- The Bounty Board · Dynamic Content
- Endless Deals · Infinite Scroll
- Pit Wall Telemetry · Streaming Feed
- The Revolving Door · Stale Elements
- All Waits & Dynamics challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.