add layout animations

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

@@ -5,7 +5,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {notesnook} from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
-import {useNotebookStore, useSelectionStore, useSettingStore} from '../../provider/stores';
+import {
+  useNotebookStore,
+  useSelectionStore,
+  useSettingStore
+} from '../../provider/stores';
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
@@ -13,7 +17,7 @@ import {
   ToastEvent
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import {getTotalNotes} from '../../utils';
+import {getTotalNotes, InteractionManager} from '../../utils';
 import {db} from '../../utils/database';
 import {eOpenMoveNoteDialog} from '../../utils/Events';
 import {pv, SIZE} from '../../utils/SizeUtils';
@@ -27,6 +31,7 @@ import Input from '../Input';
 import {ActionIcon} from '../ActionIcon';
 import {Dialog} from '../Dialog';
 import {presentDialog} from '../Dialog/functions';
+import layoutmanager from '../../utils/layout-manager';
 
 let newNotebookTitle = null;
 let newTopicTitle = null;
@@ -106,7 +111,7 @@ const MoveNoteComponent = ({close, note, setNote}) => {
       topics: [],
       id: null
     });
-    console.log("added notebook id",id);
+    console.log('added notebook id', id);
     setExpanded(id);
     openAddTopicDialog(db.notebooks.notebook(id).data);
     notebookInput.current?.clear();
@@ -115,7 +120,7 @@ const MoveNoteComponent = ({close, note, setNote}) => {
     updateNoteExists();
   };
 
-  const addNewTopic = async (value,item) => {
+  const addNewTopic = async (value, item) => {
     if (!value || value.trim().length === 0) {
       ToastEvent.show({
         heading: 'Topic title is required',
@@ -140,11 +145,14 @@ const MoveNoteComponent = ({close, note, setNote}) => {
 
       if (note && note.id) {
         setNote({...db.notes.note(note.id).data});
-        Navigation.setRoutesToUpdate([
+        requestAnimationFrame(() => {
-          Navigation.routeNames.NotesPage,
+          layoutmanager.withSpringAnimation(500);
-          Navigation.routeNames.Favorites,
+          Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Notes
+            Navigation.routeNames.NotesPage,
-        ]);
+            Navigation.routeNames.Favorites,
+            Navigation.routeNames.Notes
+          ]);
+        });
       }
       setNotebooks();
       updateNoteExists();
@@ -164,12 +172,14 @@ const MoveNoteComponent = ({close, note, setNote}) => {
     );
     if (note && note.id) {
       setNote({...db.notes.note(note.id).data});
-
+      requestAnimationFrame(() => {
-      Navigation.setRoutesToUpdate([
+        layoutmanager.withSpringAnimation(500);
-        Navigation.routeNames.NotesPage,
+        Navigation.setRoutesToUpdate([
-        Navigation.routeNames.Favorites,
+          Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Notes
+          Navigation.routeNames.Favorites,
-      ]);
+          Navigation.routeNames.Notes
+        ]);
+      });
     }
     setNotebooks();
     updateNoteExists();
@@ -204,10 +214,9 @@ const MoveNoteComponent = ({close, note, setNote}) => {
       paragraph: 'Add a new topic in ' + item.title,
       positiveText: 'Add',
       positivePress: value => {
-        return addNewTopic(value,item);
+        return addNewTopic(value, item);
       }
     });
-
   };
 
   return (
@@ -232,7 +241,7 @@ const MoveNoteComponent = ({close, note, setNote}) => {
           }}>
           <DialogHeader
             title="Add to notebook"
-            paragraph={`Add your notes in notebooks to find them easily.`}
+            paragraph={`Add your notes to notebooks to find them easily.`}
           />
         </View>
 
@@ -304,6 +313,7 @@ const MoveNoteComponent = ({close, note, setNote}) => {
                     openAddTopicDialog(item);
                     return;
                   }
+                  layoutmanager.withAnimation(200);
                   setExpanded(item.id === expanded ? null : item.id);
                   setNotebookInputFocused(false);
                 }}
@@ -350,6 +360,7 @@ const MoveNoteComponent = ({close, note, setNote}) => {
                         setExpanded(item.id);
                         return;
                       }
+                      layoutmanager.withAnimation(200);
                       setExpanded(item.id);
                       openAddTopicDialog(item);
                     }}

apps/mobile/src/components/Properties/colortags.js

@@ -10,6 +10,7 @@ import {dWidth} from '../../utils';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {db} from '../../utils/database';
 import {refreshNotesPage} from '../../utils/Events';
+import layoutmanager from '../../utils/layout-manager';
 import {SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 
@@ -26,6 +27,7 @@ export const ColorTags = ({item, close}) => {
       await db.notes.note(note.id).color(color.name);
     }
     let _note = db.notes.note(note.id).data;
+    layoutmanager.withAnimation(200);
     setNote({..._note});
     setColorNotes();
     Navigation.setRoutesToUpdate([

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

@@ -51,6 +51,7 @@ import {
   refreshNotesPage
 } from '../../utils/Events';
 import {deleteItems, openLinkInBrowser} from '../../utils/functions';
+import layoutmanager from '../../utils/layout-manager';
 import {MMKV} from '../../utils/mmkv';
 import {SIZE} from '../../utils/SizeUtils';
 import {sleep} from '../../utils/TimeUtils';

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

@@ -1,19 +1,19 @@
-import React, { useEffect } from 'react';
+import React, {useEffect} from 'react';
-import { BackHandler, View } from 'react-native';
+import {BackHandler, View} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { useSelectionStore } from '../../provider/stores';
+import {useSelectionStore} from '../../provider/stores';
-import { eSendEvent, ToastEvent } from '../../services/EventManager';
+import {eSendEvent, ToastEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { db } from '../../utils/database';
+import SearchService from '../../services/SearchService';
-import {
+import {db} from '../../utils/database';
-  eOpenMoveNoteDialog, refreshNotesPage
+import {eOpenMoveNoteDialog, refreshNotesPage} from '../../utils/Events';
-} from '../../utils/Events';
+import {deleteItems} from '../../utils/functions';
-import { deleteItems } from '../../utils/functions';
+import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
+import {SIZE} from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
+import {ActionIcon} from '../ActionIcon';
-import { presentDialog } from '../Dialog/functions';
+import {presentDialog} from '../Dialog/functions';
 import Heading from '../Typography/Heading';
 
 export const SelectionHeader = React.memo(({screen, type, extras}) => {
@@ -35,7 +35,7 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
       Navigation.setRoutesToUpdate([
         Navigation.routeNames.Notes,
         Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Favorites,
+        Navigation.routeNames.Favorites
       ]);
       setSelectionMode(false);
       clearSelection();
@@ -55,18 +55,19 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
         Navigation.routeNames.Notebooks,
         Navigation.routeNames.NotesPage,
         Navigation.routeNames.Favorites,
-        Navigation.routeNames.Trash,
+        Navigation.routeNames.Trash
       ]);
       setSelectionMode(false);
       clearSelection();
       ToastEvent.show({
         heading: 'Restore successful',
-        type: 'success',
+        type: 'success'
       });
     }
   };
 
   const onBackPress = () => {
+    layoutmanager.withSpringAnimation(500);
     setSelectionMode(false);
     clearSelection();
     return true;
@@ -86,21 +87,19 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
         width: '100%',
         height: 50 + insets.top,
         paddingTop: insets.top,
-        backgroundColor: colors.accent,
+        backgroundColor: colors.bg,
-        justifyContent: 'center',
+        justifyContent: 'space-between',
         alignItems: 'center',
         flexDirection: 'row',
         zIndex: 999,
-        paddingHorizontal: 12,
+        paddingHorizontal: 12
       }}>
       <View
         style={{
           flexDirection: 'row',
           justifyContent: 'flex-start',
           alignItems: 'center',
-          position: 'absolute',
+          borderRadius: 100
-          left: 12,
-          paddingTop: insets.top,
         }}>
         <ActionIcon
           customStyle={{
@@ -109,39 +108,56 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
             height: 40,
             width: 40,
             borderRadius: 100,
-            marginLeft: -5,
+            marginRight: 10
-            marginRight: 25,
           }}
+          type="grayBg"
           onPress={() => {
             setSelectionMode(!selectionMode);
             clearSelection();
           }}
-          color={colors.light}
+          size={SIZE.xl}
+          color={colors.icon}
           name="close"
         />
 
-        {Platform.OS === 'android' ? (
+        <View
-          <Heading color={colors.light}>
+          style={{
-            {selectedItemsList.length + ' Selected'}
+            backgroundColor: colors.nav,
-          </Heading>
+            height: 40,
-        ) : null}
+            borderRadius: 100,
+            paddingHorizontal: 16,
+            justifyContent: 'center',
+            flexDirection: 'row',
+            alignItems: 'center'
+          }}>
+          {Platform.OS === 'android' ? (
+            <Heading size={SIZE.md} color={colors.accent}>
+              {selectedItemsList.length + ' Selected'}
+            </Heading>
+          ) : null}
+        </View>
       </View>
-
-      {Platform.OS !== 'android' ? (
-        <Heading color={colors.light}>
-          {selectedItemsList.length + ' Selected'}
-        </Heading>
-      ) : null}
-
       <View
         style={{
           flexDirection: 'row',
           justifyContent: 'flex-start',
-          alignItems: 'center',
+          alignItems: 'center'
-          position: 'absolute',
-          right: 12,
-          paddingTop: insets.top,
         }}>
+        {/* <ActionIcon
+          onPress={async () => {
+            // await sleep(100);
+            // eSendEvent(eOpenMoveNoteDialog);
+            useSelectionStore.getState().setAll([...SearchService.getSearchInformation().data]);
+
+          }}
+          customStyle={{
+            marginLeft: 10
+          }}
+          color={colors.pri}
+          name="select-all"
+          size={SIZE.xl}
+        /> */}
+
         {screen === 'Trash' ||
         screen === 'Notebooks' ||
         screen === 'Notebook' ||
@@ -153,9 +169,9 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
               eSendEvent(eOpenMoveNoteDialog);
             }}
             customStyle={{
-              marginLeft: 10,
+              marginLeft: 10
             }}
-            color={colors.light}
+            color={colors.pri}
             name="plus"
             size={SIZE.xl}
           />
@@ -176,16 +192,16 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
                   Navigation.routeNames.Favorites,
                   Navigation.routeNames.Notes,
                   Navigation.routeNames.Notebook,
-                  Navigation.routeNames.Notebooks,
+                  Navigation.routeNames.Notebooks
                 ]);
                 setSelectionMode(false);
                 clearSelection();
               }
             }}
             customStyle={{
-              marginLeft: 10,
+              marginLeft: 10
             }}
-            color={colors.light}
+            color={colors.pri}
             name="minus"
             size={SIZE.xl}
           />
@@ -195,9 +211,9 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
           <ActionIcon
             onPress={addToFavorite}
             customStyle={{
-              marginLeft: 10,
+              marginLeft: 10
             }}
-            color={colors.light}
+            color={colors.pri}
             name="star-off"
             size={SIZE.xl}
           />
@@ -206,7 +222,7 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
         {screen === 'Trash' ? null : (
           <ActionIcon
             customStyle={{
-              marginLeft: 10,
+              marginLeft: 10
             }}
             onPress={async () => {
               presentDialog({
@@ -221,12 +237,12 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
                 positivePress: () => {
                   deleteItems();
                 },
-                positiveType:"errorShade"
+                positiveType: 'errorShade'
               });
 
               return;
             }}
-            color={colors.light}
+            color={colors.pri}
             name="delete"
             size={SIZE.xl}
           />
@@ -235,9 +251,9 @@ export const SelectionHeader = React.memo(({screen, type, extras}) => {
         {screen === 'Trash' ? (
           <ActionIcon
             customStyle={{
-              marginLeft: 10,
+              marginLeft: 10
             }}
-            color={colors.light}
+            color={colors.pri}
             onPress={restoreItem}
             name="delete-restore"
             size={SIZE.xl - 3}

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

@@ -6,6 +6,7 @@ import Navigation from '../../services/Navigation';
 import {GROUP, SORT} from '../../utils';
 import {db} from '../../utils/database';
 import {refreshNotesPage} from '../../utils/Events';
+import layoutmanager from '../../utils/layout-manager';
 import {SIZE} from '../../utils/SizeUtils';
 import {Button} from '../Button';
 import Seperator from '../Seperator';
@@ -19,7 +20,10 @@ const Sort = ({type, screen}) => {
   );
 
   const updateGroupOptions = async _groupOptions => {
+
     await db.settings.setGroupOptions(type, _groupOptions);
+
+    layoutmanager.withSpringAnimation(600);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
       Navigation.setRoutesToUpdate([screen]);

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

@@ -3,17 +3,26 @@ import {ScrollView, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {useTagStore} from '../../provider/stores';
-import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import {db} from '../../utils/database';
-import {eCloseTagsDialog, eOpenTagsDialog, refreshNotesPage} from '../../utils/Events';
+import {
+  eCloseTagsDialog,
+  eOpenTagsDialog,
+  refreshNotesPage
+} from '../../utils/Events';
 import {SIZE} from '../../utils/SizeUtils';
 import SheetWrapper from '../Sheet';
 import Input from '../Input';
 import {PressableButton} from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
 import Heading from '../Typography/Heading';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
+import layoutmanager from '../../utils/layout-manager';
 const TagsDialog = () => {
   const [state] = useTracked();
   const colors = state.colors;
@@ -47,6 +56,7 @@ const TagsDialog = () => {
     }
 
     if (!note || !note.tags) {
+      layoutmanager.withAnimation(150);
       setTags(_tags);
       return;
     }
@@ -59,7 +69,9 @@ const TagsDialog = () => {
       }
     }
     noteTags = noteTags.sort((a, b) => a.title.localeCompare(b.title));
-    setTags([...noteTags, ..._tags]);
+    let combinedTags = [...noteTags, ..._tags];
+    //layoutmanager.withAnimation(combinedTags.length === 0 ? 50 : 150);
+    setTags(combinedTags);
   };
 
   const open = item => {
@@ -85,34 +97,35 @@ const TagsDialog = () => {
       ToastEvent.show({
         heading: 'Tag field is empty',
         type: 'error',
-        context: 'local',
+        context: 'local'
       });
       return;
     }
 
     let tag = _query;
+    layoutmanager.withSpringAnimation(300);
     setNote({...note, tags: note.tags ? [...note.tags, tag] : [tag]});
+    setQuery(null);
     inputRef.current?.setNativeProps({
-      text: '',
+      text: ''
     });
     try {
       await db.notes.note(note.id).tag(tag);
       useTagStore.getState().setTags();
-      setNote(db.notes.note(note.id).data);
+      //setNote(db.notes.note(note.id).data);
-      setQuery(null);
     } catch (e) {
       ToastEvent.show({
         heading: 'Cannot add tag',
         type: 'error',
         message: e.message,
-        context: 'local',
+        context: 'local'
       });
     }
 
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.NotesPage,
       Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes,
+      Navigation.routeNames.Notes
     ]);
   };
 
@@ -133,17 +146,18 @@ const TagsDialog = () => {
           width: '100%',
           alignSelf: 'center',
           paddingHorizontal: 12,
-          minHeight: '60%',
+          minHeight: '60%'
         }}>
         <Input
           button={{
             icon: 'magnify',
             color: colors.accent,
-            size: SIZE.lg,
+            size: SIZE.lg
           }}
           fwdRef={inputRef}
           autoCapitalize="none"
           onChangeText={v => {
+            layoutmanager.withSpringAnimation(400);
             setQuery(db.tags.sanitize(v));
           }}
           onSubmit={onSubmit}
@@ -167,7 +181,7 @@ const TagsDialog = () => {
                 flexDirection: 'row',
                 marginVertical: 5,
                 justifyContent: 'space-between',
-                padding: 12,
+                padding: 12
               }}
               onPress={onSubmit}
               type="accent">
@@ -177,13 +191,13 @@ const TagsDialog = () => {
               <Icon name="plus" color={colors.light} size={SIZE.lg} />
             </PressableButton>
           ) : null}
-          {!tags || tags.length === 0 ? (
+          {!query && (!tags || tags.length === 0) ? (
             <View
               style={{
                 width: '100%',
                 height: 200,
                 justifyContent: 'center',
-                alignItems: 'center',
+                alignItems: 'center'
               }}>
               <Heading size={50} color={colors.icon}>
                 #
@@ -193,6 +207,7 @@ const TagsDialog = () => {
               </Paragraph>
             </View>
           ) : null}
+
           {tags.map(item => (
             <TagItem
               key={item.title}
@@ -223,14 +238,23 @@ const TagItem = ({tag, note, setNote}) => {
       } else {
         await db.notes.note(note.id).tag(tag.title);
       }
-      useTagStore.getState().setTags();
+
-      setNote(db.notes.note(note.id).data);
+      setNote({
+        ...note,
+        tags: note.tags.slice(tag.title)
+      });
+     
     } catch (e) {}
-    Navigation.setRoutesToUpdate([
+    setTimeout(() => {
-      Navigation.routeNames.NotesPage,
+      layoutmanager.withAnimation(150);
-      Navigation.routeNames.Favorites,
+      useTagStore.getState().setTags();
-      Navigation.routeNames.Notes,
+      Navigation.setRoutesToUpdate([
-    ]);
+        Navigation.routeNames.NotesPage,
+        Navigation.routeNames.Favorites,
+        Navigation.routeNames.Notes
+      ]);
+    }, 1);
+   
   };
 
   return (
@@ -239,7 +263,7 @@ const TagItem = ({tag, note, setNote}) => {
         flexDirection: 'row',
         marginVertical: 5,
         justifyContent: 'space-between',
-        padding: 12,
+        padding: 12
       }}
       onPress={onPress}
       type={

apps/mobile/src/provider/interfaces.ts

@@ -73,12 +73,13 @@ export type Settings = {
     screenshotMode?: boolean,
     privacyScreen?: boolean,
     appLockMode?: string,
-    telemetry: boolean,
+    telemetry?: boolean,
-    notebooksListMode: "normal" | "compact",
+    notebooksListMode?: "normal" | "compact",
-    notesListMode: "normal" | "compact",
+    notesListMode?: "normal" | "compact",
-    devMode: boolean,
+    devMode?: boolean,
-    notifNotes: boolean
+    notifNotes?: boolean
-    pitchBlack:boolean
+    pitchBlack?:boolean, 
+    reduceAnimations?:boolean
 
 }
 

apps/mobile/src/provider/stores.ts

@@ -1,9 +1,9 @@
-import {Platform} from 'react-native';
+import {LayoutAnimation, Platform} from 'react-native';
 import {Dimensions} from 'react-native';
 import create from 'zustand';
 import PremiumService from '../services/PremiumService';
 import {history, SUBSCRIPTION_STATUS} from '../utils';
-import { APP_VERSION } from "../../version";
+import {APP_VERSION} from '../../version';
 import {db} from '../utils/database';
 import {MMKV} from '../utils/mmkv';
 import {
@@ -27,6 +27,7 @@ import {EditorWebView, post} from '../views/Editor/Functions';
 import tiny from '../views/Editor/tiny/tiny';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../services/EventManager';
 import {endSearch} from '../views/Editor/tiny/toolbar/commands';
+import layoutmanager from '../utils/layout-manager';
 
 export const useNoteStore = create<NoteStore>((set, get) => ({
   notes: [],
@@ -247,9 +248,10 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
     notesListMode: 'normal',
     devMode: false,
     notifNotes: false,
-    pitchBlack: false
+    pitchBlack: false,
+    reduceAnimations:false
   },
-  sheetKeyboardHandler:true,
+  sheetKeyboardHandler: true,
   fullscreen: false,
   deviceMode: 'mobile',
   dimensions: {width, height},
@@ -261,7 +263,7 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
   setDimensions: dimensions => set({dimensions: dimensions}),
   setAppLoading: appLoading => set({appLoading}),
   setIntroCompleted: isIntroCompleted => set({isIntroCompleted}),
-  setSheetKeyboardHandler:(sheetKeyboardHandler) => set({sheetKeyboardHandler})
+  setSheetKeyboardHandler: sheetKeyboardHandler => set({sheetKeyboardHandler})
 }));
 
 export const useMenuStore = create<MenuStore>((set, get) => ({
@@ -298,15 +300,13 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
       return;
     }
     let func = (value: string) => {
-      console.log("setSearchReplace:", value, value.length);
+      eUnSubscribeEvent('selectionvalue', func);
+      console.log('setSearchReplace:', value, value.length);
       if ((!value || value.trim() === '') && get().searchReplace) {
         endSearch();
         return;
       }
-
       set({searchSelection: value, searchReplace: true});
-
-      eUnSubscribeEvent('selectionvalue', func);
     };
     eSubscribeEvent('selectionvalue', func);
     tiny.call(
@@ -341,6 +341,7 @@ export const useSelectionStore = create<SelectionStore>((set, get) => ({
       history.selectedItemsList = [];
       history.selectionMode = false;
     }
+    layoutmanager.withSpringAnimation(500);
     set({
       selectionMode: mode,
       selectedItemsList: mode ? get().selectedItemsList : []
@@ -360,7 +361,7 @@ export const useSelectionStore = create<SelectionStore>((set, get) => ({
 
     history.selectionMode =
       selectedItems.length > 0 ? get().selectionMode : false;
-
+      layoutmanager.withSpringAnimation(500);
     set({
       selectedItemsList: selectedItems,
       selectionMode: history.selectionMode
@@ -369,6 +370,7 @@ export const useSelectionStore = create<SelectionStore>((set, get) => ({
   clearSelection: () => {
     history.selectedItemsList = [];
     history.selectionMode = false;
+    layoutmanager.withSpringAnimation(500);
     set({selectionMode: false, selectedItemsList: []});
   }
 }));
@@ -382,7 +384,12 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
     data: {},
     icon: 'account-outline'
   },
-  setMessage: message => set({message: {...message}}),
+  setMessage: message => {
+    setTimeout(() => {
+      layoutmanager.withAnimation();
+      set({message: {...message}});
+    }, 1);
+  },
   announcements: [],
   remove: async id => {
     MMKV.setStringAsync(id, 'removed');
@@ -396,7 +403,6 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
       dialogsCopy.splice(dialogIndex, 1);
       inlineCopy.splice(index, 1);
     }
-
     set({announcements: inlineCopy, dialogs: dialogsCopy});
   },
   dialogs: [],
@@ -412,10 +418,16 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
       set({announcements: []});
     } finally {
       let all = await getFiltered(announcements);
-      set({
+
-        announcements: all.filter(a => a.type === 'inline'),
+      setTimeout(() => {
-        dialogs: all.filter(a => a.type === 'dialog')
+        if (all.filter(a => a.type === 'inline').length !== 0) {
-      });
+          layoutmanager.withAnimation();
+        }
+        set({
+          announcements: all.filter(a => a.type === 'inline'),
+          dialogs: all.filter(a => a.type === 'dialog')
+        });
+      }, 1);
     }
   }
 }));

apps/mobile/src/utils/functions.js

@@ -6,6 +6,7 @@ import {eSendEvent, ToastEvent} from '../services/EventManager';
 import Navigation from '../services/Navigation';
 import {db} from './database';
 import {eClearEditor} from './Events';
+import layoutmanager from './layout-manager';
 
 export const deleteItems = async item => {
   if (item && db.monographs.isPublished(item.id)) {
@@ -43,6 +44,8 @@ export const deleteItems = async item => {
       .filter(n => n !== null);
 
     await db.notes.delete(...ids);
+
+    layoutmanager.withAnimation(150);
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.Notes,
       Navigation.routeNames.NotesPage
@@ -54,6 +57,8 @@ export const deleteItems = async item => {
       let it = topics[i];
       await db.notebooks.notebook(it.notebookId).topics.delete(it.id);
     }
+
+    layoutmanager.withAnimation(150);
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.Notebooks,
       Navigation.routeNames.Notebook
@@ -68,6 +73,8 @@ export const deleteItems = async item => {
   if (notebooks?.length > 0) {
     let ids = notebooks.map(i => i.id);
     await db.notebooks.delete(...ids);
+
+    layoutmanager.withAnimation(150);
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.Notebooks,
       Navigation.routeNames.Notes
@@ -92,6 +99,8 @@ export const deleteItems = async item => {
           ids.push(trashItem.id);
         }
         await db.trash.restore(...ids);
+
+        layoutmanager.withAnimation(150);
         Navigation.setRoutesToUpdate([
           Navigation.routeNames.Notebooks,
           Navigation.routeNames.Notes,

apps/mobile/src/views/Editor/tiny/toolbar/searchreplace.js

@@ -9,6 +9,7 @@ import {
   eUnSubscribeEvent
 } from '../../../../services/EventManager';
 import {showTooltip, TOOLTIP_POSITIONS} from '../../../../utils';
+import layoutmanager from '../../../../utils/layout-manager';
 import {SIZE} from '../../../../utils/SizeUtils';
 import {sleep} from '../../../../utils/TimeUtils';
 import {EditorWebView} from '../../Functions';
@@ -113,7 +114,10 @@ const SearcReplace = () => {
     {
       icon: 'chevron-left',
       type: 'gray',
-      press: () => setMenu(false),
+      press: () => {
+        layoutmanager.withAnimation(150);
+        setMenu(false);
+      },
       fullname: 'Go back'
     },
     {
@@ -156,7 +160,10 @@ const SearcReplace = () => {
         {
           icon: 'dots-vertical',
           type: 'gray',
-          press: () => setMenu(true),
+          press: () => {
+            layoutmanager.withAnimation(150);
+            setMenu(true);
+          },
           fullname: 'Show options'
         }
       ];
@@ -198,6 +205,7 @@ const SearcReplace = () => {
         }}
         iconColor={enableReplace ? colors.accent : colors.icon}
         onPress={() => {
+          layoutmanager.withSpringAnimation(500);
           if (enableReplace) {
             if (focusType === 2) {
               findRef.current?.focus();

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

@@ -39,7 +39,7 @@ export const Settings = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
   const [version, setVersion] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
 
   let pageIsLoaded = false;
@@ -71,7 +71,6 @@ export const Settings = ({navigation}) => {
 
   useEffect(() => {
     InteractionManager.runAfterInteractions(() => {
-      setLoading(false);
       navigation.addListener('focus', onFocus);
       db.version()
         .then(ver => {

apps/mobile/src/views/Settings/sectionheader.js

@@ -6,6 +6,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Heading from '../../components/Typography/Heading';
 import Paragraph from '../../components/Typography/Paragraph';
 import { useTracked } from '../../provider';
+import layoutmanager from '../../utils/layout-manager';
 import { SIZE } from '../../utils/SizeUtils';
 
 const SectionHeader = ({title, collapsed, setCollapsed}) => {
@@ -16,6 +17,7 @@ const SectionHeader = ({title, collapsed, setCollapsed}) => {
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={() => {
+        layoutmanager.withAnimation(200);
         setCollapsed(!collapsed);
       }}
       style={{