Add UI for Friends & Friend Requests Pages #627
Description
🚀 The feature
The Friends page and the Friend Requests page currently display a blank screen when the user has no friends or no pending friend requests. This leads to confusion for first-time users as there is no indication of what the page is supposed to show or what actions they can take.
Current Behavior:
Friends Page: Shows an empty view with no text, illustration, or guidance when the user has zero friends.
Friend Requests Page: Similarly shows a blank screen when there are no incoming/outgoing friend requests.
Expected Behavior:
Both screens should display:
A clear empty-state message explaining that there are no friends/friend requests yet.
To make the empty state more actionable and guide users on what to do next, we can include one or more buttons like:
Find Friends
Opens the search or discovery screen where users can look up other users by name/ID. This directly helps them add their first friend instead of leaving them unsure about what to do next, which will improve the UX
Share Your Profile
Allows users to copy or share their unique profile link/ID.
Invite a Friend
Lets users invite contacts who are not yet on the platform (via WhatsApp, email, etc.).
Motivation, pitch
Improves user experience: Blank screens can make the app feel broken or unfinished. Empty states reassure users that the feature is working and guide them on next steps.
Enhances onboarding: New users often begin with zero connections. A friendly, informative empty state helps them understand how to use the social features.
Reduces user confusion: Without messaging, users may assume the friends feature is not implemented or is malfunctioning.
Standard UX practice: Most modern apps use empty-state patterns to improve clarity and engagement.