apply some optimizations

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -54,7 +54,7 @@ export const ContainerBottomButton = ({
         right: 12,
         bottom:
           Platform.OS === 'ios' && insets.bottom !== 0
-            ? insets.bottom - 25
+            ? Platform.isPad ? insets.bottom - 12 : insets.bottom - 24
             : insets.bottom + 12,
         zIndex: 10,
         transform: [

apps/mobile/src/components/Header/HeaderLeftMenu.js

@@ -7,27 +7,9 @@ import Navigation from '../../services/Navigation';
 import {SIZE} from '../../utils/SizeUtils';
 import {ActionIcon} from '../ActionIcon';
 
-export const HeaderLeftMenu = () => {
+export const HeaderLeftMenu = ({currentScreen,headerMenuState}) => {
   const [state] = useTracked();
   const {colors, deviceMode} = state;
-  const [headerTextState, setHeaderTextState] = useState(
-    Navigation.getHeaderState(),
-  );
-
- const currentScreen = headerTextState.currentScreen;
- const headerMenuState = headerTextState.verticalMenu;
-
-  const onHeaderStateChange = (event) => {
-    if (!event) return;
-     setHeaderTextState(event);
-  };
-
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
 
   const onLeftButtonPress = () => {
     if (headerMenuState) {

apps/mobile/src/components/Header/HeaderRightMenu.js

@@ -10,25 +10,9 @@ import {SIZE} from '../../utils/SizeUtils';
 import {ActionIcon} from '../ActionIcon';
 import {Button} from '../Button';
 
-export const HeaderRightMenu = () => {
+export const HeaderRightMenu = ({currentScreen}) => {
   const [state] = useTracked();
   const {colors, containerBottomButton, syncing} = state;
-  const [headerTextState, setHeaderTextState] = useState(
-    Navigation.getHeaderState(),
-  );
-  const currentScreen = headerTextState.currentScreen;
-
-  const onHeaderStateChange = (event) => {
-    if (!event) return;
-     setHeaderTextState(event);
-  };
-
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
  
   return (
     <View style={styles.rightBtnContainer}>

apps/mobile/src/components/Header/HeaderTitle.js

@@ -11,20 +11,9 @@ const opacity = new Animated.Value(DDS.isLargeTablet() ? 1 : 0);
 
 let scrollPostions = {};
 
-export const HeaderTitle = () => {
+export const HeaderTitle = ({heading,headerColor}) => {
   const [state] = useTracked();
   const {colors} = state;
-  const [headerTextState, setHeaderTextState] = useState(Navigation.getHeaderState());
-
-  const onHeaderStateChange = (event) => {
-         setHeaderTextState(event);
-  };
-  useEffect(() => {
-    eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    return () => {
-      eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
-    };
-  }, []);
  
 
   const onScroll = async (y) => {
@@ -55,7 +44,7 @@ export const HeaderTitle = () => {
     } else {
       opacity.setValue(0);
     }
-    scrollPostions[headerTextState?.heading] = y;
+    scrollPostions[heading] = y;
   };
 
   useEffect(() => {
@@ -63,21 +52,21 @@ export const HeaderTitle = () => {
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  }, [headerTextState?.heading]);
+  }, [heading]);
   
   return (
     <Animated.View
       style={{
         opacity: DDS.isTab ? 1 : opacity,
       }}>
-      <Heading color={headerTextState?.color}>
+      <Heading color={headerColor}>
         <Heading color={colors.accent}>
-          {headerTextState?.heading.slice(0, 1) === '#' ? '#' : null}
+          {heading.slice(0, 1) === '#' ? '#' : null}
         </Heading>
 
-        {headerTextState?.heading.slice(0, 1) === '#'
+        {heading.slice(0, 1) === '#'
-          ? headerTextState?.heading.slice(1)
+          ? heading.slice(1)
-          : headerTextState?.heading}
+          : heading}
       </Heading>
     </Animated.View>
   );

apps/mobile/src/components/Header/index.js

@@ -24,7 +24,7 @@ export const Header = ({root}) => {
   );
   const currentScreen = headerTextState.currentScreen;
 
-  const onHeaderStateChange = (event) => {
+  const onHeaderStateChange = event => {
     if (!event) return;
     setHeaderTextState(event);
   };
@@ -36,7 +36,7 @@ export const Header = ({root}) => {
     };
   }, []);
 
-  const onScroll = (y) => {
+  const onScroll = y => {
     if (y > 150) {
       setHide(false);
     } else {
@@ -65,29 +65,40 @@ export const Header = ({root}) => {
         },
       ]}>
       <View style={styles.leftBtnContainer}>
-        <HeaderLeftMenu />
+        <HeaderLeftMenu
+          headerMenuState={headerTextState.verticalMenu}
+          currentScreen={currentScreen}
+        />
 
-        {(Platform.OS === 'android' ||
+        {(Platform.OS === 'android' || Platform.isPad) &&
-        Platform.isPad) && currentScreen !== 'Search' ? (
+        currentScreen !== 'Search' ? (
-          <HeaderTitle root={root} />
+          <HeaderTitle
+            headerColor={headerTextState.color}
+            heading={headerTextState.heading}
+            currentScreen={currentScreen}
+            root={root}
+          />
         ) : null}
       </View>
       {Platform.OS !== 'android' &&
       !Platform.isPad &&
       currentScreen !== 'Search' ? (
-        <HeaderTitle root={root} />
+        <HeaderTitle
+          headerColor={headerTextState.color}
+          heading={headerTextState.heading}
+          currentScreen={currentScreen}
+          root={root}
+        />
       ) : null}
 
       {currentScreen === 'Search' ? (
+        <>
           <View
             style={{
               width: '80%',
             }}>
             <SearchInput />
           </View>
-      ) : null}
-
-      {currentScreen === 'Search' ? (
           <View style={[styles.rightBtnContainer, {right: 6}]}>
             <ActionIcon
               onPress={() => {
@@ -99,8 +110,9 @@ export const Header = ({root}) => {
               style={styles.rightBtn}
             />
           </View>
+        </>
       ) : (
-        <HeaderRightMenu />
+        <HeaderRightMenu currentScreen={currentScreen} />
       )}
     </View>
   );

apps/mobile/src/components/SimpleList/index.js

@@ -67,10 +67,16 @@ const SimpleList = ({
         ),
       );
       setLoading(false);
-      sleep(100).then(() => setLoaded(true));
+      setTimeout(() => {
+        setLoaded(true)
+      },50);
     }
   }, [listData, deviceMode, loading]);
 
+  useEffect(() => {
+    console.log("rerendering");
+  })
+
   const _onRefresh = async () => {
     await Sync.run();
     if (refreshCallback) {

apps/mobile/src/navigation/NavigatorStack.js

@@ -74,7 +74,7 @@ const forSlide = ({current, next, inverted, layouts: {screen}}) => {
 };
 
 const screenOptionsForAnimation = {
-  animationEnabled: true,
+  animationEnabled: false,
   cardStyleInterpolator: forSlide,
   gestureEnabled: true,
 };

apps/mobile/src/services/Navigation.js

@@ -123,7 +123,6 @@ function setHeaderState(name, params, item) {
   currentScreen = name;
   headerState.currentScreen = name;
   headerState.verticalMenu = params.menu;
-
   if (headerState) {
     eSendEvent('onHeaderStateChange', {...headerState});
   }

apps/mobile/src/views/Folders/index.js

@@ -20,11 +20,6 @@ export const Folders = ({route, navigation}) => {
   let ranAfterInteractions = false;
 
   const onFocus = useCallback(() => {
-    if (!ranAfterInteractions) {
-      ranAfterInteractions = true;
-      runAfterInteractions();
-    }
-
     if (!pageIsLoaded) {
       pageIsLoaded = true;
       return;
@@ -39,7 +34,10 @@ export const Folders = ({route, navigation}) => {
         id: 'notebooks_navigation',
       },
     );
- 
+    if (!ranAfterInteractions) {
+      ranAfterInteractions = true;
+      runAfterInteractions();
+    }
   }, []);
 
   const runAfterInteractions = () => {
@@ -48,8 +46,8 @@ export const Folders = ({route, navigation}) => {
         setLoading(false);
       }
       Navigation.routeNeedsUpdate('Notebooks', () => {
-        dispatch({type:Actions.NOTEBOOKS})
+        dispatch({type: Actions.NOTEBOOKS});
-      })
+      });
 
       eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'});
       updateSearch();

apps/mobile/src/views/Notebook/index.js

@@ -32,12 +32,11 @@ export const Notebook = ({route, navigation}) => {
       params.notebook = notebook;
       params.title = params.notebook.title;
       setTopics(notebook.topics);
-      sleep(10).then((r) => {
+      setTimeout(() => {
         if (loading) {
           setLoading(false);
         }
-      });
+      },10)
-
       Navigation.routeNeedsUpdate('Notebook', () => {
         onLoad();
       });

apps/mobile/src/views/Notes/index.js

@@ -22,7 +22,6 @@ import {
   refreshNotesPage,
 } from '../../utils/Events';
 import {tabBarRef} from '../../utils/Refs';
-import {sleep} from '../../utils/TimeUtils';
 
 export const Notes = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
@@ -56,9 +55,9 @@ export const Notes = ({route, navigation}) => {
       }
       setNotes(_notes);
       if (localLoad) {
-        sleep(10).then((r) => {
+        setTimeout(() => {
           setLocalLoad(false);
-        });
+        }, 10);
       }
       if (params.menu) {
         navigation.setOptions({
@@ -72,6 +71,7 @@ export const Notes = ({route, navigation}) => {
         });
       }
       updateSearch();
+      if (DDS.isLargeTablet()) {
         dispatch({
           type: Actions.CONTAINER_BOTTOM_BUTTON,
           state: {
@@ -79,6 +79,8 @@ export const Notes = ({route, navigation}) => {
             color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
           },
         });
+      }
+
       ranAfterInteractions = false;
     }, time);
   };
@@ -118,7 +120,7 @@ export const Notes = ({route, navigation}) => {
     }
   };
 
-  const init = (data) => {
+  const init = data => {
     if (data) {
       setLocalLoad(true);
       params = data;