chris/budget-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

[BTAPP-43] Skeleton loaders for transaction loading and week navigation #52

Merged
chris merged 9 commits from feature/BTAPP-43 into main 2026-06-26 15:28:56 -06:00
Conversation 0 Commits 9 Files changed 10 +291 -73
chris commented 2026-06-26 07:39:40 -06:00
Owner
Copy link

Ticket

BTAPP-43 Explore skeleton loaders for transaction loading and week navigation

Summary

  • Replaces the full-screen spinner with a <TransactionsSkeleton> component (SVG shimmer via react-content-loader, which reuses the already-installed react-native-svg)
  • On initial load the full-screen skeleton shows without the week picker
  • During week navigation the week picker stays visible and only the content area skeletons, preserving the user's sense of which week they navigated to
  • Splits the old single isLoading flag into isInitialLoad (tags/one-time not yet resolved) and isNavigating (budget pending for a new week but supporting data ready)
  • Moves weekRange calculation to use weekDate state instead of budget.date so the picker can render before budget resolves
  • 2 new screen-level tests cover the initial-load and navigation skeleton paths
## Ticket [BTAPP-43](http://192.168.2.100:7123/home/browse/BTAPP-43/) Explore skeleton loaders for transaction loading and week navigation ## Summary - Replaces the full-screen spinner with a `<TransactionsSkeleton>` component (SVG shimmer via `react-content-loader`, which reuses the already-installed `react-native-svg`) - On **initial load** the full-screen skeleton shows without the week picker - During **week navigation** the week picker stays visible and only the content area skeletons, preserving the user's sense of which week they navigated to - Splits the old single `isLoading` flag into `isInitialLoad` (tags/one-time not yet resolved) and `isNavigating` (budget pending for a new week but supporting data ready) - Moves `weekRange` calculation to use `weekDate` state instead of `budget.date` so the picker can render before budget resolves - 2 new screen-level tests cover the initial-load and navigation skeleton paths
[BTAPP-43] Wire TransactionsSkeleton into TransactionsScreen.
All checks were successful
app / check (pull_request) Successful in 25s
Details
2e0fdd3edd 
Each component renders inline View-based skeleton blocks when loading={true}, so
sizes are guaranteed to match the real layout. TransactionsScreen keeps the week
picker visible at all times and uses a single isLoading flag instead of the
isInitialLoad/isNavigating split. react-content-loader and the TransactionsSkeleton
component are removed.
[BTAPP-43] Add pulse animation to skeleton loaders; standardize border radius to 4.
Some checks failed
app / check (pull_request) Failing after 8s
Details
4e2bb4e8bb 
usePulse hook drives an 800ms opacity fade (1 → 0.4 → 1) via React Native's
Animated API on the skeleton containers in Progress, Transactions, and
TransactionsScreen. All skeleton rectangles now use borderRadius 4 consistently
(pill progress bar stays at 9999; owner dot stays at 4 = 50% of 8dp).
Also fixes a latent Rules of Hooks violation in Progress where useMemo was
called after an early return.
[BTAPP-43] Replace usePulse with Skeleton component and SkeletonProvider.
Some checks failed
app / check (pull_request) Failing after 9s
Details
c7de7c2189 
Introduces a shared Skeleton component (wave shimmer animation via translateX,
all instances driven by one Animated.Value from SkeletonProvider context) and
removes the per-component usePulse hook. Fixes the hardcoded isLoading = true
left from design review.
[BTAPP-43] Add SVG linear gradient to skeleton sweep bar.
Some checks failed
app / check (pull_request) Failing after 9s
Details
f7ca79f22f 
Edges of the moving sweep bar now fade to transparent, producing a soft
shimmer rather than a hard-edged white block. The bar starts fully outside
the skeleton bounds (tx starts at -SWEEP_W) and wider (70% of screen width)
so gradient fades have room before the visible portion enters.
[BTAPP-43] Fix skeleton sweep bar snapping into view on loop restart.
Some checks failed
app / check (pull_request) Failing after 8s
Details
8d4c9af81c 
Animated.delay uses useNativeDriver:false internally, so mixing it into an
Animated.loop sequence with a native-driver timing animation caused a JS-bridge
round-trip between iterations. A frame could render before the reset setValue
propagated to the native thread, making the sweep bar briefly visible at the
left edge. Replaced with a manual sweep() that calls tx.setValue(-SWEEP_W)
explicitly before each iteration and uses setTimeout for the inter-sweep pause.
[BTAPP-43] Remove stale react-content-loader entry from bun.lock.
All checks were successful
app / check (pull_request) Successful in 19s
Details
plane-sync / sync (pull_request) Successful in 1s
Details
da65c10411
chris merged commit 4c48292fc7 into main 2026-06-26 15:28:56 -06:00
chris deleted branch feature/BTAPP-43 2026-06-26 15:28:56 -06:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
chris/budget-tracker!52
No description provided.