Skip to content

fix: improve loading state handling in RootLayout component - #155

Merged
LuisAll12 merged 19 commits into
devfrom
fix/auth-loading
Apr 20, 2026
Merged

LuisAll12 merged 19 commits into
devfrom
fix/auth-loading

Conversation

@Jamie-Poeffel

@Jamie-Poeffel Jamie-Poeffel commented Apr 17, 2026 •

Copy link
Copy Markdown
Collaborator

closes #48 by @GRuoss

Summary by CodeRabbit

  • New Features

    • Added outage/maintenance screen with animated visual feedback and retry countdown.
    • Added server status page displaying connection issues and available features.
    • Added offline indicator to main interface.
    • Implemented subscription checkout flow with pricing, plan features, and trust badges.
    • Added icebreaker suggestions during video calls.
  • Improvements

    • Chat message previews now truncate to prevent overflow.
    • Enhanced chat message scrolling and ordering behavior.
    • Terms, Privacy, and About links now open in external browser.
    • Added in-app purchase support.
    • App rebranded to "Elysio - Dating."

@coderabbitai

coderabbitai Bot commented Apr 17, 2026 •

Copy link
Copy Markdown

Warning

Rate limit exceeded

@Jamie-Poeffel has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 49 minutes and 59 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 49 minutes and 59 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c7c8a712-1b0d-4937-90c8-f9edd4e4676b

📥 Commits

Reviewing files that changed from the base of the PR and between 41c3e21 and 3c86566.

📒 Files selected for processing (1)
  • app.json
📝 Walkthrough

Walkthrough

This PR introduces server health monitoring with outage/update screens, integrates RevenueCat subscription checkout with multi-tier plans, refactors chat message list scrolling behavior, migrates cryptographic backends to react-native-fast-rsa and expo-crypto, adds video call icebreaker functionality, and enhances app layouts with offline indicators, external browser links, and form-sheet routes.

Changes

Cohort / File(s) Summary
Server Health Monitoring
app/_layout.tsx, app/(auth)/outage.tsx, app/(auth)/update.tsx, app/(protected)/info.tsx, components/ServerStatusSheet.tsx
Added server health probing in AppContent with polling logic that drives serverStatus state; renders OutageScreen when server is down and UpdateScreen when updates are available; new info.tsx screen displays detailed server status with collapsible sections; ServerStatusSheet.tsx provides reusable UI components (RecheckPill, AlertBanner, StatusCard, etc.) for status visualization.
Subscription Checkout Integration
app/(protected)/subscriptions/checkout.tsx, app/(protected)/subscriptions/plans.ts, app/(protected)/subscriptions/index.tsx
Extracted plan definitions (BillingCycle, Plan, PLANS, PLANS_MAP) into new plans.ts module; new checkout.tsx integrates RevenueCat Purchases API to load offerings, select packages, and handle purchase flow; updated index.tsx with Reanimated price animation, CHF currency, yearly discount messaging, and navigation wiring to checkout.
Chat Message List Refactoring
app/(protected)/chats/[id].tsx
Replaced inverted FlashList with normal scroll-from-bottom layout; changed scroll handler to trigger loadOlderMessages() when near top and compute bottom distance for button visibility; migrated from scrollToOffset to scrollToEnd with 50ms timeout; reversed message ordering and updated attachSameMinute neighbor index logic; added maintainVisibleContentPosition and hasScrolledOnLoad for improved scroll management.
Cryptographic Backend Migration
services/chat-crypto.client.ts, package.json
Replaced react-native-rsa-native + react-native-aes-gcm-crypto with react-native-fast-rsa + expo-crypto AES APIs; updated RSA key generation to RSA.generate(2048) and encryption/decryption to OAEP with SHA256; migrated AES key caching from Base64 strings to AESEncryptionKey objects; refactored encryption output extraction from AESSealedData; added base64ToBytes helper for sealed-data reconstruction.
Settings & Navigation Enhancements
app/(protected)/(tabs)/settings.tsx, app/(protected)/(tabs)/index.tsx, app/(protected)/_layout.tsx
Added CloudOff icon import and "Offline" pill overlay in home tab; replaced static href navigation for Terms/Privacy/About with WebBrowser.openBrowserAsync calls; new form-sheet route /settings/info configured in ProtectedLayout with detents/grabber; removed Safe Area wrapper and introduced BackWrapper styling changes.
Video Call & UI Enhancements
app/(protected)/videocall/index.tsx, components/backwrapper.tsx, components/menuRow.tsx, components/ChatComponent.tsx
Added hardcoded ICEBREAKERS list with random selection and bubble UI in video call screen; introduced conditional p padding prop to BackWrapper; updated MenuRow with union-type MenuRowProps to support either onPress or href (not both); limited chat preview message to 2 lines via numberOfLines={2}.
Theme, Hooks & Utilities
lib/theme/theme.ts, hooks/useCacheFetch.ts, utils/formatTime.ts, lib/auth/AuthProvider.tsx
Added gray and orange color tokens; new useCacheFetch hook manages cached fetch with TTL, auth headers, and error handling; added minToMs utility for minute-to-millisecond conversion; removed initCrypto call from AuthProvider hydration (now only in login).
Configuration & Cleanup
app.json, .gitignore, options.txt
Updated Expo display name to "Elysio - Dating"; added iOS entitlements and react-native-purchases plugin; consolidated duplicate .env.local entries in .gitignore; removed coturn/google-servers reference from options.txt.

Sequence Diagrams

sequenceDiagram
    participant Client as React Native App
    participant AppContent as AppContent (Root)
    participant Server as Health Check Server
    participant Crypto as Crypto Init
    participant Cache as Cache/Store

    Client->>AppContent: Mount RootLayout
    AppContent->>Server: Poll SERVER_URL (every 5s)
    alt Server Down
        Server-->>AppContent: HTTP Error / No Response
        AppContent->>Client: Render OutageScreen
    else Server Updating
        Server-->>AppContent: Response starts with "update"
        AppContent->>Client: Render UpdateScreen (with duration)
    else Server OK
        Server-->>AppContent: 200 OK
        AppContent->>AppContent: Set serverStatus = "ok"
        AppContent->>Crypto: initCrypto(SERVER_URL, token)
        AppContent->>Cache: useCacheFetch(/chat/rooms)
        Cache-->>AppContent: Cached chat rooms
        AppContent->>Client: Render AppContent → Slot
    end
Loading
sequenceDiagram
    participant User as User
    participant App as Checkout Screen
    participant RevenueCat as RevenueCat Offerings
    participant Purchases as Purchases SDK
    participant Success as Purchase Result

    User->>App: Navigate with planId & billing
    App->>RevenueCat: Purchases.getOfferings()
    RevenueCat-->>App: Available packages (annual/monthly)
    App->>App: Select package (with fallback logic)
    App->>User: Render order summary & features
    User->>App: Tap "Subscribe" button
    App->>Purchases: Purchases.purchasePackage(pkg)
    Purchases-->>Success: Purchase complete
    Success-->>App: customerInfo.entitlements.active[planId]
    App->>App: Update loading state
    App->>User: Success notification
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • Feature/subscriptions #153 — Implements the full subscriptions feature including plan definitions, tier selection, and checkout wiring; directly overlaps with the subscription checkout and plans refactoring in this PR.
  • Chore/refactor login #149 — Modifies chat list scroll/FlashList behavior and message list rendering; directly related to the significant chat message list refactoring in app/(protected)/chats/[id].tsx.
  • Feature/chat #138 — Updates chat crypto flow and auth initialization paths; closely related to the cryptographic backend migration and AuthProvider changes in this PR.

Suggested labels

bug

Suggested reviewers

  • LuisAll12
  • GRuoss

Poem

🐰 Hops through updates with glee,
Subscriptions and servers now play,
Chats scroll with new ease,
Crypto keys find their peace,
Hearts beat, icebreakers say! ❄️💔

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The PR includes extensive out-of-scope changes: cryptography library migrations, subscription checkout flow, server outage/update screens, offline indicators, and multiple UI/component updates unrelated to the stated loading state handling objective. Separate out-of-scope changes into distinct PRs or provide clear justification for why all these features must be included with the loading state fix.
Docstring Coverage ⚠️ Warning Docstring coverage is 32.61% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check ❓ Inconclusive The linked issue #48 'IceBreaker' lacks specific coding requirements. However, the PR's icebreaker feature addition in app/(protected)/videocall/index.tsx suggests implementation intent, though the connection remains unclear without detailed issue specifications. Clarify the exact coding requirements for issue #48 IceBreaker to fully validate that all objectives have been met.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title describes improved loading state handling in RootLayout, which aligns with the substantial changes to app/_layout.tsx that refactor server health probing, auth-dependent bootstrap logic, and rendering gates.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/auth-loading

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Jamie-Poeffel
Jamie-Poeffel requested a review from LuisAll12 April 20, 2026 19:44
@Jamie-Poeffel
Jamie-Poeffel marked this pull request as ready for review April 20, 2026 19:54
@LuisAll12
LuisAll12 merged commit c3af94d into dev Apr 20, 2026
1 check passed
This was referenced Apr 22, 2026
@Jamie-Poeffel
Jamie-Poeffel deleted the fix/auth-loading branch April 30, 2026 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

IceBreaker

3 participants