From 393cefc50a37270f7e5b2b037129a1c3e2af583f Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Tue, 20 May 2025 15:50:27 +0700
Subject: [PATCH 1/2] fix: Refreshing Help page briefly displays we couldn't
 find content

---
 .../SidePanel/HelpComponents/HelpContent.tsx  | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/SidePanel/HelpComponents/HelpContent.tsx b/src/components/SidePanel/HelpComponents/HelpContent.tsx
index b6c0c91f58210..cf63c9af23beb 100644
--- a/src/components/SidePanel/HelpComponents/HelpContent.tsx
+++ b/src/components/SidePanel/HelpComponents/HelpContent.tsx
@@ -2,6 +2,7 @@ import {findFocusedRoute} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useOnyx} from 'react-native-onyx';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 // Importing from the react-native-gesture-handler package instead of the `components/ScrollView` to fix scroll issue:
 // https://github.com/react-native-modal/react-native-modal/issues/236
 import HeaderGap from '@components/HeaderGap';
@@ -13,7 +14,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useRootNavigationState from '@hooks/useRootNavigationState';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {normalizedConfigs} from '@libs/Navigation/linkingConfig/config';
-import {navigationRef} from '@libs/Navigation/Navigation';
 import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
 import {getHelpPaneReportType} from '@libs/ReportUtils';
 import {getExpenseType} from '@libs/TransactionUtils';
@@ -32,13 +32,13 @@ function HelpContent({closeSidePanel}: HelpContentProps) {
     const {isExtraLargeScreenWidth} = useResponsiveLayout();
     const [expandedIndex, setExpandedIndex] = useState(0);
 
-    const {params, routeName} = useRootNavigationState(() => {
-        const focusedRoute = findFocusedRoute(navigationRef.getRootState());
+    const {params, routeName, currentState} = useRootNavigationState((rootState) => {
+        const focusedRoute = findFocusedRoute(rootState);
         setExpandedIndex(0);
-
         return {
             routeName: (focusedRoute?.name ?? '') as Screen,
             params: focusedRoute?.params as Record<string, string>,
+            currentState: rootState,
         };
     });
 
@@ -90,13 +90,17 @@ function HelpContent({closeSidePanel}: HelpContentProps) {
                 shouldShowCloseButton={isExtraLargeScreenWidth}
                 shouldDisplayHelpButton={false}
             />
-            <ScrollView
-                style={[styles.ph5, styles.pb5]}
-                userSelect="auto"
-                scrollIndicatorInsets={{right: Number.MIN_VALUE}}
-            >
-                {getHelpContent(styles, route, isProduction, expandedIndex, setExpandedIndex)}
-            </ScrollView>
+            {currentState === undefined ? (
+                <FullScreenLoadingIndicator />
+            ) : (
+                <ScrollView
+                    style={[styles.ph5, styles.pb5]}
+                    userSelect="auto"
+                    scrollIndicatorInsets={{right: Number.MIN_VALUE}}
+                >
+                    {getHelpContent(styles, route, isProduction, expandedIndex, setExpandedIndex)}
+                </ScrollView>
+            )}
         </>
     );
 }

From 649f339fb11bcbf12cec6827df39e50b9c67e4cc Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 21 May 2025 16:31:21 +0700
Subject: [PATCH 2/2] Update
 src/components/SidePanel/HelpComponents/HelpContent.tsx

Co-authored-by: Hans <hungvu193@users.noreply.github.com>
---
 src/components/SidePanel/HelpComponents/HelpContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SidePanel/HelpComponents/HelpContent.tsx b/src/components/SidePanel/HelpComponents/HelpContent.tsx
index cf63c9af23beb..8c2c85ca6f032 100644
--- a/src/components/SidePanel/HelpComponents/HelpContent.tsx
+++ b/src/components/SidePanel/HelpComponents/HelpContent.tsx
@@ -91,7 +91,7 @@ function HelpContent({closeSidePanel}: HelpContentProps) {
                 shouldDisplayHelpButton={false}
             />
             {currentState === undefined ? (
-                <FullScreenLoadingIndicator />
+                <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
             ) : (
                 <ScrollView
                     style={[styles.ph5, styles.pb5]}