do not load dialogs on init in memory

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

@@ -215,21 +215,6 @@ export class AddNotebookDialog extends React.Component {
         topics: prevTopics,
       });
       this.currentInputValue = null;
-      /*   if (prevTopics[this.prevIndex + 1] && forward) {
-                this.prevIndex = this.prevIndex + 1;
-                this.prevItem = prevTopics[this.prevIndex];
-                this.currentInputValue = this.prevItem;
-                this.topicInputRef.setNativeProps({
-                    text: null,
-                });
-                this.topicInputRef.setNativeProps({
-                    text: prevTopics[this.prevIndex],
-                });
-                this.setState({
-                    editTopic:true
-                })
-            } else {} */
-
       if (this.state.editTopic) {
         this.topicInputRef.blur();
         Keyboard.dismiss();
@@ -261,9 +246,10 @@ export class AddNotebookDialog extends React.Component {
       visible,
       topicInputFocused,
     } = this.state;
+    if (!visible) return null;
     return (
       <Modal
-        visible={visible}
+        visible={true}
         transparent={true}
         animated
         animationType={DDS.isTab ? 'fade' : 'slide'}

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

@@ -59,13 +59,13 @@ export class AddTopicDialog extends React.Component {
   render() {
     const {visible, titleFocused} = this.state;
     const {colors, toEdit} = this.props;
-
+    if (!visible) return null;
     return (
       <BaseDialog
         onShow={() => {
           this.titleRef.current?.focus();
         }}
-        visible={visible}
+        visible={true}
         onRequestClose={this.close}>
         <View
           style={{

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

@@ -2,17 +2,9 @@ import React, {Component} from 'react';
 import {View} from 'react-native';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent, ToastEvent} from '../../services/EventManager';
-import NavigationService from '../../services/Navigation';
+import {ToastEvent} from '../../services/EventManager';
 import {getElevation, history} from '../../utils';
 import {db} from '../../utils/DB';
-import {
-  eApplyChanges,
-  eClearEditor,
-  eCloseFullscreenEditor,
-  eOnLoadNote,
-  eOnNewTopicAdded,
-} from '../../utils/Events';
 import {ph, pv} from '../../utils/SizeUtils';
 import {dialogActions} from '../DialogManager/DialogActions';
 import {updateEvent} from '../DialogManager/recievers';
@@ -87,8 +79,10 @@ export class Dialog extends Component {
     const {template, colors} = this.props;
     const {title, paragraph, positiveText, negativeText, icon} = template;
     const {visible} = this.state;
+
+    if (!visible) return null;
     return (
-      <BaseDialog visible={visible} onRequestClose={this.hide}>
+      <BaseDialog visible={true} onRequestClose={this.hide}>
         <View
           style={{
             ...getElevation(5),

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

@@ -46,7 +46,8 @@ import {DDS} from '../../services/DeviceDetection';
 import ResultDialog from '../ResultDialog';
 import SortDialog from '../SortDialog';
 import JumpToDialog from '../JumpToDialog';
-import {GetPremium,translatePrem} from '../ActionSheetComponent/GetPremium';
+import {GetPremium, translatePrem} from '../ActionSheetComponent/GetPremium';
+import {sleep} from '../../utils/TimeUtils';
 
 export class DialogManager extends Component {
   constructor(props) {
@@ -55,6 +56,7 @@ export class DialogManager extends Component {
     this.opened = false;
     this.state = {
       item: {},
+      actionSheetVisible: false,
       actionSheetData: {
         colors: false,
         tags: false,
@@ -84,6 +86,7 @@ export class DialogManager extends Component {
       {
         actionSheetData: data,
         item: data.item ? data.item : {},
+        actionSheetVisible: true,
       },
       () => {
         this.actionSheet._setModalVisible();
@@ -93,6 +96,11 @@ export class DialogManager extends Component {
 
   _hideActionSheet = () => {
     this.actionSheet._setModalVisible();
+    sleep(200).then(() => {
+      this.setState({
+        actionSheetVisible: false,
+      });
+    });
   };
 
   _showMoveNote = () => {
@@ -230,11 +238,11 @@ export class DialogManager extends Component {
         case 'delete': {
           if (this.state.item.locked) {
             openVault({
-              item:this.state.item,
-              novault:true,
-              locked:true,
-              deleteNote:true,
-            })
+              item: this.state.item,
+              novault: true,
+              locked: true,
+              deleteNote: true,
+            });
           } else {
             this._showSimpleDialog(TEMPLATE_DELETE(this.state.item.type));
           }
@@ -246,28 +254,28 @@ export class DialogManager extends Component {
         }
         case 'novault': {
           openVault({
-            item:this.state.item,
-            novault:false,
-            locked:true,
-            deleteNote:true,
-          })
+            item: this.state.item,
+            novault: false,
+            locked: true,
+            deleteNote: true,
+          });
           break;
         }
         case 'locked': {
           openVault({
-            item:this.state.item,
-            novault:true,
-            locked:true,
-          })
+            item: this.state.item,
+            novault: true,
+            locked: true,
+          });
           break;
         }
         case 'unlock': {
           openVault({
-            item:this.state.item,
-            novault:true,
-            locked:true,
-            permanant:true
-          })
+            item: this.state.item,
+            novault: true,
+            locked: true,
+            permanant: true,
+          });
           break;
         }
         case 'notebook': {
@@ -300,6 +308,7 @@ export class DialogManager extends Component {
     let {actionSheetData, item, simpleDialog} = this.state;
     return (
       <>
+        {!this.state.actionSheetVisible ? null : (
           <ActionSheet
             ref={(ref) => (this.actionSheet = ref)}
             containerStyle={{
@@ -339,7 +348,7 @@ export class DialogManager extends Component {
             bounceOnOpen={false}
             gestureEnabled={true}
             onClose={() => {
-            translatePrem.setValue(-800)
+              translatePrem.setValue(-800);
               this.onActionSheetHide();
             }}>
             <ActionSheetComponent
@@ -362,6 +371,8 @@ export class DialogManager extends Component {
               }}
             />
           </ActionSheet>
+        )}
+
         <Dialog
           ref={(ref) => (this.simpleDialog = ref)}
           item={item}

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

@@ -154,11 +154,11 @@ const ExportDialog = () => {
     },
   ];
 
-  return (
+  return !visible ? null : (
     <BaseDialog
       premium={<GetPremium context="export" offset={50} close={close} />}
       onRequestClose={close}
-      visible={visible}>
+      visible={true}>
       <View
         style={[
           {

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

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {ScrollView, View} from 'react-native';
 import BaseDialog from '../../components/Dialog/base-dialog';
-import { PressableButton } from '../../components/PressableButton';
+import {PressableButton} from '../../components/PressableButton';
 import Seperator from '../../components/Seperator';
-import { useTracked } from '../../provider';
-import { DDS } from '../../services/DeviceDetection';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { getElevation, scrollRef } from '../../utils';
-import { eCloseJumpToDialog, eOpenJumpToDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import {useTracked} from '../../provider';
+import {DDS} from '../../services/DeviceDetection';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {getElevation, scrollRef} from '../../utils';
+import {eCloseJumpToDialog, eOpenJumpToDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -83,13 +83,13 @@ const JumpToDialog = () => {
       });
   };
 
-  return (
+  return !visible ? null : (
     <BaseDialog
       onShow={() => {
         loadOffsets();
       }}
       onRequestClose={close}
-      visible={visible}>
+      visible={true}>
       <View
         style={{
           ...getElevation(5),

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

@@ -1,5 +1,5 @@
 import React, {createRef, useEffect, useState} from 'react';
-import {Modal, Text, TouchableOpacity, View} from 'react-native';
+import {Modal, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -109,7 +109,6 @@ const LoginDialog = () => {
 
     try {
       let res = await db.user.login(username.toLowerCase(), password);
-   
     } catch (e) {
       setTimeout(() => {
         ToastEvent.show(e.message, 'error', 'local');
@@ -202,13 +201,13 @@ const LoginDialog = () => {
     }
   };
 
-  return (
+  return !visible ? null : (
     <Modal
       animated={true}
       animationType={DDS.isTab ? 'fade' : 'slide'}
       statusBarTranslucent={true}
       onRequestClose={close}
-      visible={visible}
+      visible={true}
       transparent={true}>
       <View
         style={{

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

@@ -281,8 +281,8 @@ const MergeEditor = () => {
           link.click();  
     }`;
 
-  return (
-    <Modal transparent={false} animated animationType="fade" visible={visible}>
+  return !visible ? null : (
+    <Modal transparent={false} animated animationType="fade" visible={true}>
       <SafeAreaView
         style={{
           backgroundColor: colors.nav,

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

@@ -1,28 +1,21 @@
 import React, {createRef, useEffect, useState} from 'react';
-import {
-  FlatList,
-  Modal,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {FlatList, Modal, TextInput, TouchableOpacity, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
+import {DDS} from '../../services/DeviceDetection';
 import {
   eSubscribeEvent,
   eUnSubscribeEvent,
   ToastEvent,
 } from '../../services/EventManager';
-import {eOpenMoveNoteDialog} from '../../utils/Events';
 import {getElevation} from '../../utils';
+import {db} from '../../utils/DB';
+import {eOpenMoveNoteDialog} from '../../utils/Events';
+import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 import {Toast} from '../Toast';
-import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {db} from '../../utils/DB';
-import {DDS} from '../../services/DeviceDetection';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -80,9 +73,7 @@ const MoveNoteDialog = () => {
     if (!newTopicTitle || newTopicTitle.trim().length === 0) {
       return ToastEvent.show('Title is required', 'error', 'local');
     }
-
     let res = await db.notebooks.notebook(expanded).topics.add(newTopicTitle);
-
     dispatch({type: Actions.NOTEBOOKS});
     dispatch({type: Actions.PINNED});
     topicInput.current?.clear();
@@ -90,12 +81,12 @@ const MoveNoteDialog = () => {
     newTopicTitle = null;
   };
 
-  return (
+  return !visible ? null : (
     <Modal
       animated={true}
       animationType="slide"
       onRequestClose={close}
-      visible={visible}
+      visible={true}
       statusBarTranslucent={true}
       transparent={true}>
       <View

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

@@ -36,8 +36,8 @@ const ProgressDialog = () => {
     setVisible(false);
   };
 
-  return (
-    <BaseDialog visible={visible} onRequestClose={close}>
+  return !visible ? null : (
+    <BaseDialog visible={true} onRequestClose={close}>
       <View
         style={{
           ...getElevation(5),

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

@@ -1,24 +1,25 @@
-import React, {createRef} from 'react';
-import {Clipboard, Text, View} from 'react-native';
+import React, { createRef } from 'react';
+import { Clipboard, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import RNFetchBlob from 'rn-fetch-blob';
-import {LOGO_BASE64} from '../../assets/images/assets';
+import { LOGO_BASE64 } from '../../assets/images/assets';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
-  ToastEvent,
+  ToastEvent
 } from '../../services/EventManager';
-import {eOpenRecoveryKeyDialog, eOpenResultDialog} from '../../utils/Events';
-import {dWidth} from '../../utils';
-import ActionSheet from '../ActionSheet';
-import {Button} from '../Button';
-import Seperator from '../Seperator';
-import {Toast} from '../Toast';
-import {SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {db} from '../../utils/DB';
+import { dWidth } from '../../utils';
+import { db } from '../../utils/DB';
+import { eOpenRecoveryKeyDialog, eOpenResultDialog } from '../../utils/Events';
+import { SIZE } from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
+import { sleep } from '../../utils/TimeUtils';
+import ActionSheet from '../ActionSheet';
+import { Button } from '../Button';
+import Seperator from '../Seperator';
+import { Toast } from '../Toast';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 class RecoveryKeyDialog extends React.Component {
@@ -26,6 +27,7 @@ class RecoveryKeyDialog extends React.Component {
     super(props);
     this.state = {
       key: null,
+      visible: false,
     };
     this.actionSheetRef = createRef();
     this.svg = createRef();
@@ -37,11 +39,23 @@ class RecoveryKeyDialog extends React.Component {
     if (signup) {
       this.signup = true;
     }
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
         this.actionSheetRef.current?._setModalVisible(true);
+      },
+    );
   };
 
   close = () => {
     this.actionSheetRef.current?._setModalVisible(false);
+    sleep(200).then(() => {
+      this.setState({
+        visible: false,
+      });
+    });
     if (this.signup) {
       setTimeout(() => {
         eSendEvent(eOpenResultDialog, {
@@ -122,6 +136,7 @@ class RecoveryKeyDialog extends React.Component {
 
   render() {
     const {colors} = this.props;
+    if (!this.state.visible) return null;
     return (
       <ActionSheet
         containerStyle={{

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

@@ -80,10 +80,10 @@ const RestoreDialog = () => {
     setFiles(files);
   };
 
-  return (
+  return !visible? null : (
     <BaseDialog
       animation="slide"
-      visible={visible}
+      visible={true}
       onShow={checkBackups}
       onRequestClose={close}>
       <View

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

@@ -1,13 +1,13 @@
-import React, {useEffect, useState} from 'react';
-import {Text, View} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useTracked} from '../../provider';
-import {DDS} from '../../services/DeviceDetection';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {getElevation} from '../../utils';
-import {eCloseResultDialog, eOpenResultDialog} from '../../utils/Events';
-import {ph, SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {Button} from '../Button';
+import { useTracked } from '../../provider';
+import { DDS } from '../../services/DeviceDetection';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import { getElevation } from '../../utils';
+import { eCloseResultDialog, eOpenResultDialog } from '../../utils/Events';
+import { ph, SIZE } from '../../utils/SizeUtils';
+import { Button } from '../Button';
 import BaseDialog from '../Dialog/base-dialog';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
@@ -41,8 +41,8 @@ const ResultDialog = () => {
     setVisible(false);
   };
 
-  return (
-    <BaseDialog visible={visible} onRequestClose={close}>
+  return !visible ? null : (
+    <BaseDialog visible={true} onRequestClose={close}>
       <View
         style={{
           ...getElevation(5),

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

@@ -1,21 +1,22 @@
 import React, {createRef} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {dWidth, SORT, sortSettings} from '../../utils';
-import ActionSheet from '../ActionSheet';
-import {DDS} from '../../services/DeviceDetection';
-import {eCloseSortDialog, eOpenSortDialog} from '../../utils/Events';
-import {PressableButton} from '../PressableButton';
-import {SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {defaultState} from '../../provider/DefaultState';
-import {MMKV} from '../../utils/mmkv';
-import {updateEvent} from '../DialogManager/recievers';
-import {Actions} from '../../provider/Actions';
+import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Seperator from '../Seperator';
+import {Actions} from '../../provider/Actions';
+import {defaultState} from '../../provider/DefaultState';
+import {DDS} from '../../services/DeviceDetection';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import SettingsService from '../../services/SettingsService';
-import Paragraph from '../Typography/Paragraph';
+import {dWidth, SORT, sortSettings} from '../../utils';
+import {eCloseSortDialog, eOpenSortDialog} from '../../utils/Events';
+import {MMKV} from '../../utils/mmkv';
+import {SIZE} from '../../utils/SizeUtils';
+import {sleep} from '../../utils/TimeUtils';
+import ActionSheet from '../ActionSheet';
+import {updateEvent} from '../DialogManager/recievers';
+import {PressableButton} from '../PressableButton';
+import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
 
 const actionSheet = createRef();
 
@@ -24,12 +25,20 @@ class SortDialog extends React.Component {
     super(props);
     this.state = {
       settings: defaultState.settings,
+      visible: false,
     };
   }
 
   async open() {
+    this.setState(
+      {
+        visible: true,
+      },
+      async () => {
         actionSheet.current?._setModalVisible(true);
         await this.getSettings();
+      },
+    );
   }
 
   async getSettings() {
@@ -41,6 +50,11 @@ class SortDialog extends React.Component {
 
   close() {
     actionSheet.current?._setModalVisible(false);
+    sleep(200).then(() => {
+      this.setState({
+        visible: false,
+      });
+    });
   }
 
   async componentDidMount() {
@@ -55,6 +69,9 @@ class SortDialog extends React.Component {
 
   render() {
     const {colors} = this.props;
+
+    if (!this.state.visible) return null;
+
     return (
       <ActionSheet
         containerStyle={{

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

@@ -322,13 +322,14 @@ export class VaultDialog extends Component {
       biometricUnlock,
     } = this.state;
 
+    if (!visible) return null;
     return (
       <BaseDialog
         onShow={() => {
           passInputRef.current?.focus();
         }}
         onRequestClose={this.close}
-        visible={visible}>
+        visible={true}>
         <View
           style={{
             ...getElevation(5),
@@ -495,7 +496,8 @@ export class VaultDialog extends Component {
             </View>
           ) : null}
 
-          {this.state.isBiometryAvailable && !this.state.fingerprintAccess &&
+          {this.state.isBiometryAvailable &&
+          !this.state.fingerprintAccess &&
           (!this.state.biometricUnlock || !novault) ? (
             <TouchableOpacity
               onPress={() => {

apps/mobile/src/services/SettingsService.js

@@ -38,7 +38,8 @@ async function init() {
   sortSettings.sortOrder = settings.sortOrder;
   updateSize();
   updateEvent({type: Actions.SETTINGS, settings: {...settings}});
-  await setTheme();
+  setTheme();
+  return;
 }
 
 const setTheme = async () => {

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

@@ -1,11 +1,5 @@
-import React from 'react';
-import {
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  TextInput,
-  View,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import {Platform, TextInput, View} from 'react-native';
 import WebView from 'react-native-webview';
 import {useTracked} from '../../provider';
 import EditorHeader from './EditorHeader';
@@ -22,6 +16,10 @@ import {
 const Editor = () => {
   const [state] = useTracked();
   const {colors, premiumUser} = state;
+
+ useEffect(() => {
+  console.log('rendering editor');
+ })
   return (
     <>
       <TextInput
@@ -34,7 +32,9 @@ const Editor = () => {
         testID="editor"
         ref={EditorWebView}
         onError={(error) => console.log(error)}
-        onLoad={async () => await onWebViewLoad(premiumUser, colors)}
+        onLoad={async (event) =>
+          await onWebViewLoad(premiumUser, colors, event)
+        }
         javaScriptEnabled={true}
         focusable={true}
         keyboardDisplayRequiresUserAction={false}