No API Timeout Handling

[RUKAYAT-CODER]

Description

Overview
API requests have 10-second timeout but no UI feedback.

Background
The axios timeout is set to 10000ms but there's no loading indicator or user feedback when requests hang, leaving users with blank screens.

Specifications

• Show global loading state
• Show skeleton loaders
• Show timeout alert

Tasks:

• Add global loading to store
• Add skeleton to HomeScreen
• Add skeleton to SearchScreen
• Add timeout retry option

Impacted Files:

• src/store/index.ts
• src/screens/HomeScreen.tsx
• src/screens/SearchScreen.tsx

Labels: user-experience, api, priority-medium

🙌Contribution Guidelines:
Assignment required before PR submission
Timeframe: 48-72 hours
PR description must include: Close #13
Star the repo⭐
For more context, please refer to the mobile README

[GauravKarakoti]

@GauravKarakoti has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

I’d like to work on this issue because it targets a core UX gap—right now users are left staring at a blank screen during API delays, which feels like the app is broken. Even a 10-second timeout without feedback is too long in mobile UX. Adding loading states, skeletons, and retry handling will make the app feel responsive, trustworthy, and production-ready.

Why this matters
Prevents user confusion and drop-offs during slow or failed requests
Improves perceived performance with skeleton loaders
Gives users control via retry instead of silent failure
Aligns the app with standard UX patterns for network-based apps

Relevant experience
React / React Native development
Implemented global loading states using centralized stores (Redux/Zustand)
Built responsive screens with conditional rendering and async data flows
API handling & UX patterns
Worked with Axios including timeouts, interceptors, and error handling
Designed loading indicators, skeleton screens, and retry flows for slow APIs
State management
Managed global UI states (loading, error, success) across multiple screens
Ensured consistency between API lifecycle and UI feedback
User experience improvements
Replaced blank states with skeleton loaders and progressive rendering
Added toast/alert feedback for timeouts and failures

How I’d approach it
Global loading state
Add a loading flag in src/store/index.ts
Integrate with API calls (via Axios interceptors or dispatch actions)
Implement skeleton UI in:
HomeScreen.tsx
SearchScreen.tsx
Match layout structure to avoid layout shifts
Detect timeout errors (Axios error code)
Show alert with Retry option
Allow re-triggering the failed request cleanly
Ensure smooth transitions between loading → content → error
Keep UI accessible and consistent with existing design

This is a well-scoped improvement that directly enhances user perception and usability, and I can deliver it quickly within the 48–72 hour timeframe while keeping the PR clean and easy to review.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @GauravKarakoti to this issue.

[drips-wave]

Congratulations, @GauravKarakoti! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @GauravKarakoti: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @GauravKarakoti as part of the Stellar Wave Program's 4th Wave 🥳

😎 @GauravKarakoti: You earned 150 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.