Skip to content

Show results as they arrive

A search returns one or more result messages. Each contains a trips array. Display the first journeys as soon as they arrive and add later options to the list.

Keep a small Finding more options… indicator until the connection closes successfully.

const results = [];
function onResult(result) {
results.push(result);
render(results); // Update your journey list.
}

Use modifiers to label groups such as Bike First Mile, Rented Bike Last Mile or Direct Car. Use the actual leg modes for each journey’s mode strip.

Higher grades indicate a better fit. PlanResult.grade compares the result group; TripPattern.grade orders individual trips. Show practical details such as travel time and transfers alongside the grade.

When the search completes, stop the loading indicator. If the complete search has no journeys, offer a change of time or travel preferences. If the connection fails, show the error with a retry action.

WebSocket lifecycle · Display trip details