UI: Improve stop search results handling and animations

[ksharma-xyz]

TL;DR

Enhanced the stop search functionality with improved error handling and smoother UI transitions.

What changed?

• Added key-based list item rendering for better performance
• Implemented a 1-second delay before showing "No match found" message
• Added tracking of query timestamps to prevent false "No match found" displays
• Improved error state handling with distinct keys for error messages
• Removed redundant Unit placeholder for empty state

How to test?

1. Open the stop search screen
2. Enter a search query
3. Verify that "No match found" appears after 1 second if no results
4. Enter a valid stop name and confirm results appear
5. Clear the search and verify smooth transitions
6. Test with network errors to verify error message display

Screenshots

Screen.Recording.2024-11-12.at.12.11.19.am.mov

Why make this change?

To provide a more polished user experience by eliminating UI flicker, improving state transitions, and ensuring more reliable error handling when searching for stops.

[ksharma-xyz]

• UI: Improve stop search results handling and animations #334 👈
• UI: Add text filtering and length limits to search input #333
• UI: Add error and empty states to stop search #332
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ksharma-xyz and the rest of your teammates on Graphite

[ksharma-xyz]

Merge activity

• Nov 11, 8:35 AM EST: A user merged this pull request with Graphite.