Improve the profile preview with "swipe up to view" and local cache optimization (#1096)

* Update the ProfilePreview to use a swipe-up to navigate

* Use the profile cache to optimize load performance

* Hack to align the header in the profile preview against the screen view

* Fix profiles cache logic to ensure cache is used

* Fix dark mode on profile preview

1 files changed, 19 insertions, 3 deletions

diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index 525df7ba1..00d061616 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -6,6 +6,8 @@ import BottomSheet from '@gorhom/bottom-sheet'
 import {useStores} from 'state/index'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import {usePalette} from 'lib/hooks/usePalette'
+import {navigate} from '../../../Navigation'
+import once from 'lodash.once'
 
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
@@ -35,9 +37,25 @@ export const ModalsContainer = observer(function ModalsContainer() {
   const store = useStores()
   const bottomSheetRef = useRef<BottomSheet>(null)
   const pal = usePalette('default')
+
+  const activeModal =
+    store.shell.activeModals[store.shell.activeModals.length - 1]
+
+  const navigateOnce = once(navigate)
+
+  const onBottomSheetAnimate = (fromIndex: number, toIndex: number) => {
+    if (activeModal?.name === 'profile-preview' && toIndex === 1) {
+      // begin loading the profile screen behind the scenes
+      navigateOnce('Profile', {name: activeModal.did})
+    }
+  }
   const onBottomSheetChange = (snapPoint: number) => {
     if (snapPoint === -1) {
       store.shell.closeModal()
+    } else if (activeModal?.name === 'profile-preview' && snapPoint === 1) {
+      // ensure we navigate to Profile and close the modal
+      navigateOnce('Profile', {name: activeModal.did})
+      store.shell.closeModal()
     }
   }
   const onClose = () => {
@@ -45,9 +63,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
     store.shell.closeModal()
   }
 
-  const activeModal =
-    store.shell.activeModals[store.shell.activeModals.length - 1]
-
   useEffect(() => {
     if (store.shell.isModalActive) {
       bottomSheetRef.current?.expand()
@@ -146,6 +161,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
       }
       handleIndicatorStyle={{backgroundColor: pal.text.color}}
       handleStyle={[styles.handle, pal.view]}
+      onAnimate={onBottomSheetAnimate}
       onChange={onBottomSheetChange}>
       {element}
     </BottomSheet>