From 2dafde0117530e2ade81965c9553be6bca1ba405 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Sat, 13 Dec 2025 12:39:38 +0500
Subject: [PATCH] mobile: improve navigation performance

---
 .../mobile/app/components/delay-layout/index.tsx |  4 +---
 .../app/components/side-menu/menu-item.tsx       |  5 +----
 apps/mobile/app/screens/settings/group.tsx       |  2 +-
 apps/mobile/app/screens/settings/home.tsx        |  2 +-
 apps/mobile/app/screens/settings/index.tsx       | 16 +++++++++++-----
 apps/mobile/app/utils/menu-items.ts              |  4 +---
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/apps/mobile/app/components/delay-layout/index.tsx b/apps/mobile/app/components/delay-layout/index.tsx
index 3fa27b373..214ddf389 100644
--- a/apps/mobile/app/components/delay-layout/index.tsx
+++ b/apps/mobile/app/components/delay-layout/index.tsx
@@ -42,9 +42,7 @@ export default function DelayLayout({
   ...props
 }: IDelayLayoutProps) {
   const { colors } = useThemeColors();
-  const loading = useDelayLayout(
-    !props.delay || props.delay < 300 ? 0 : props.delay
-  );
+  const loading = useDelayLayout(props.delay === undefined ? 200 : props.delay);
   const Placeholder = placeholder[props.type || "default"];
 
   return loading || props.wait ? (
diff --git a/apps/mobile/app/components/side-menu/menu-item.tsx b/apps/mobile/app/components/side-menu/menu-item.tsx
index 974476ffc..3df1de275 100644
--- a/apps/mobile/app/components/side-menu/menu-item.tsx
+++ b/apps/mobile/app/components/side-menu/menu-item.tsx
@@ -104,15 +104,12 @@ function _MenuItem({
   const _onPress = () => {
     if (useSideBarDraggingStore.getState().dragging) return;
     if (item.onPress) return item.onPress(item);
-
+    Navigation.closeDrawer();
     if (useNavigationStore.getState().currentRoute !== item.id) {
       Navigation.navigate(item.id as keyof RouteParams, {
         canGoBack: false
       });
     }
-    setTimeout(() => {
-      Navigation.closeDrawer();
-    }, 32);
   };
 
   return (
diff --git a/apps/mobile/app/screens/settings/group.tsx b/apps/mobile/app/screens/settings/group.tsx
index dc450f807..deb56d131 100644
--- a/apps/mobile/app/screens/settings/group.tsx
+++ b/apps/mobile/app/screens/settings/group.tsx
@@ -59,7 +59,7 @@ const Group = ({
           id="Settings"
         />
       )}
-      <DelayLayout type="settings" delay={0}>
+      <DelayLayout type="settings">
         <View
           style={{
             flex: 1
diff --git a/apps/mobile/app/screens/settings/home.tsx b/apps/mobile/app/screens/settings/home.tsx
index face83701..682efec4d 100644
--- a/apps/mobile/app/screens/settings/home.tsx
+++ b/apps/mobile/app/screens/settings/home.tsx
@@ -59,7 +59,7 @@ const Home = ({
         hasSearch={false}
         id="Settings"
       />
-      <DelayLayout delay={0} type="settings">
+      <DelayLayout type="settings">
         <LegendList
           data={settingsGroups}
           keyExtractor={keyExtractor}
diff --git a/apps/mobile/app/screens/settings/index.tsx b/apps/mobile/app/screens/settings/index.tsx
index 1443299e6..5038b3365 100644
--- a/apps/mobile/app/screens/settings/index.tsx
+++ b/apps/mobile/app/screens/settings/index.tsx
@@ -17,23 +17,29 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import useNavigationStore from "../../stores/use-navigation-store";
-import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
 import Group from "./group";
 import Home from "./home";
 import { RouteParams } from "./types";
-import { SafeAreaView } from "react-native-safe-area-context";
 const SettingsStack = createNativeStackNavigator<RouteParams>();
 
 export const Settings = () => {
   const { colors } = useThemeColors();
+  const insets = useSafeAreaInsets();
   return (
-    <SafeAreaView
+    <View
       style={{
         flex: 1,
-        backgroundColor: colors.primary.background
+        backgroundColor: colors.primary.background,
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right
       }}
     >
       <ScopedThemeProvider value="list">
@@ -58,7 +64,7 @@ export const Settings = () => {
           <SettingsStack.Screen name="SettingsGroup" component={Group} />
         </SettingsStack.Navigator>
       </ScopedThemeProvider>
-    </SafeAreaView>
+    </View>
   );
 };
 
diff --git a/apps/mobile/app/utils/menu-items.ts b/apps/mobile/app/utils/menu-items.ts
index 1bb28c82e..4fde4d932 100644
--- a/apps/mobile/app/utils/menu-items.ts
+++ b/apps/mobile/app/utils/menu-items.ts
@@ -72,10 +72,8 @@ export const MenuItemsList: SideMenuItem[] = [
     title: "Monographs",
     icon: "text-box-multiple-outline",
     onPress: () => {
+      Navigation.closeDrawer();
       Monographs.navigate();
-      setTimeout(() => {
-        Navigation.closeDrawer();
-      }, 32);
     },
     type: "side-menu-item"
   },