Skip to content

[Frontend]: Add skeleton loading for micro-app fetching, and loading feedback for sign-out - #100

Open
MohamadNazik wants to merge 1 commit into
LSFLK:mainfrom
MohamadNazik:feat/97-skeleton-loading-and-signout-feedback
Open

[Frontend]: Add skeleton loading for micro-app fetching, and loading feedback for sign-out#100
MohamadNazik wants to merge 1 commit into
LSFLK:mainfrom
MohamadNazik:feat/97-skeleton-loading-and-signout-feedback

Conversation

@MohamadNazik

Copy link
Copy Markdown

Purpose

Closes #97

Several async operations gave the user no feedback while in flight: fetching the micro-apps list (both in the Store and My Apps screens) and signing out. Users had no indication anything was happening, and could still interact with the tab bar / navigate mid-logout.

Goals

  • Show skeleton loading placeholders while micro-app data is being fetched, on both the Store screen (available apps) and the My Apps screen (installed apps).
  • Show a loading spinner on the Sign Out button and block tab bar interaction while sign-out is in progress.

Approach

  • Added Skeleton-based ListItemSkeleton/ListItemSkeletonList (row-style, for the Store screen's list layout) and WidgetSkeleton/WidgetSkeletonGrid (grid-style, for the My Apps screen's icon-grid layout) components.
  • useStore.ts: fixed a bug where loadMicroAppDetails() was called without await, so isLoading was reset before the fetch actually completed — the skeleton had no real time window to render regardless of fetch duration.
  • useMyApps.ts: added an isLoading state around the initial fetch, which previously had no loading state at all.
  • authSlice.ts: added isLoggingOut state + setLoggingOut action; performLogout.ts dispatches it at the start/on error of the logout thunk (success path resets via the existing resetAll()).
  • profile.tsx: Sign Out button shows a spinner + "Signing Out..." and is disabled while logging out.
  • (tabs)/_layout.tsx: renders an absolutely-positioned transparent overlay over the tab bar while isLoggingOut is true, blocking all touches there regardless of the tab bar's internal press-handling. (An earlier attempt using tabBarButton's disabled prop didn't reliably block navigation in testing, so the overlay is the actual guard.)

No UI changes to the native splash/app icon or other unrelated screens.

User stories

As a user, when I open the Store or My Apps screen, I see a loading skeleton instead of a blank screen while data loads. When I sign out, I see clear feedback that it's in progress and can't accidentally navigate away mid-process.

Release note

Added skeleton loading states for micro-app fetching (Store and My Apps screens) and loading feedback (spinner + disabled tab bar) during sign-out.

Automation tests

  • Integration tests: Verified manually via an EAS development build — confirmed skeletons render during fetch, sign-out spinner/disabled state work, and tab bar is correctly blocked during logout.

Security checks

  • Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Test environment

Tested on a physical Android device via an EAS development build.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend]: Add skeleton loading for micro-app fetching, and loading feedback for sign-out

1 participant