mobile: improve navigation performance

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 ? (

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 (

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

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}

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>
   );
 };
 

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"
   },