Load the ride map on demand

Load the ride-map module only when requested, reuse a successful module, and expose recoverable loading failures.

MediumReact Product Systems

50 min0% acceptance

Description

Load the ride-map module only when requested, reuse a successful module, and expose recoverable loading failures. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Export LazyRideMap from src/App.tsx.
Do not invoke loadMap until active becomes true.
Keep one loadMap promise for repeated active renders and reuse the fulfilled module.
Show a named loading state while the module promise is pending.
Expose Retry after rejection and start one fresh load without discarding rideId.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.

Closed panel

Input

active remains false

Expected output

loadMap is never called

Explanation

Do not invoke loadMap until active becomes true.

Retry

Input

The first dynamic load rejects and the second resolves

Expected output

The map renders once with the current rideId

Explanation

Keep one loadMap promise for repeated active renders and reuse the fulfilled module.

Constraints

Use React state and effects only where the observable component contract requires them
Use injected adapters instead of accessing network, storage, timers, or browser globals directly
Keep one authoritative state transition for each user or adapter event

Hints

Hint 1

Start with the loads-on-demand behavior and make its observable result deterministic.

Hint 2

Model deduplicates-loader independently before combining it with the remaining states.

Hint 3

Verify the boundary described by retries-load without changing caller-owned input.

Reactlazy loadingmaps