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

package.json

@@ -96,6 +96,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.omit": "^4.5.0",
+    "lodash.once": "^4.1.1",
     "lodash.samplesize": "^4.2.0",
     "lodash.set": "^4.3.2",
     "lodash.shuffle": "^4.2.0",
@@ -161,6 +162,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.omit": "^4.5.7",
+    "@types/lodash.once": "^4.1.7",
     "@types/lodash.samplesize": "^4.2.7",
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.shuffle": "^4.2.7",

src/Navigation.tsx

@@ -125,7 +125,10 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       <Stack.Screen
         name="Profile"
         component={ProfileScreen}
-        options={({route}) => ({title: title(`@${route.params.name}`)})}
+        options={({route}) => ({
+          title: title(`@${route.params.name}`),
+          animation: 'none',
+        })}
       />
       <Stack.Screen
         name="ProfileFollowers"

src/state/models/cache/profiles-view.ts

@@ -45,8 +45,6 @@ export class ProfilesCache {
   }
 
   overwrite(did: string, res: GetProfile.Response) {
-    if (this.cache.has(did)) {
     this.cache.set(did, res)
   }
-  }
 }

src/state/models/content/profile.ts

@@ -103,8 +103,13 @@ export class ProfileModel {
   // =
 
   async setup() {
+    const precache = await this.rootStore.profiles.cache.get(this.params.actor)
+    if (precache) {
+      await this._loadWithCache(precache)
+    } else {
       await this._load()
     }
+  }
 
   async refresh() {
     await this._load(true)
@@ -252,7 +257,7 @@ export class ProfileModel {
     this._xLoading(isRefreshing)
     try {
       const res = await this.rootStore.agent.getProfile(this.params)
-      this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
+      this.rootStore.profiles.overwrite(this.params.actor, res)
       if (res.data.handle) {
         this.rootStore.handleResolutions.cache.set(
           res.data.handle,
@@ -267,6 +272,23 @@ export class ProfileModel {
     }
   }
 
+  async _loadWithCache(precache: GetProfile.Response) {
+    // use cached value
+    this._replaceAll(precache)
+    await this._createRichText()
+    this._xIdle()
+
+    // fetch latest
+    try {
+      const res = await this.rootStore.agent.getProfile(this.params)
+      this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
+      this._replaceAll(res)
+      await this._createRichText()
+    } catch (e: any) {
+      this._xIdle(e)
+    }
+  }
+
   _replaceAll(res: GetProfile.Response) {
     this.did = res.data.did
     this.handle = res.data.handle

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>

src/view/com/modals/ProfilePreview.tsx

@@ -1,63 +1,56 @@
-import React, {useState, useEffect, useCallback} from 'react'
+import React, {useState, useEffect} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {useNavigation, StackActions} from '@react-navigation/native'
+import {ThemedText} from '../util/text/ThemedText'
-import {Text} from '../util/text/Text'
 import {useStores} from 'state/index'
 import {ProfileModel} from 'state/models/content/profile'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {ProfileHeader} from '../profile/ProfileHeader'
-import {Button} from '../util/forms/Button'
+import {InfoCircleIcon} from 'lib/icons'
-import {NavigationProp} from 'lib/routes/types'
+import {useNavigationState} from '@react-navigation/native'
+import {isIOS} from 'platform/detection'
+import {s} from 'lib/styles'
 
-export const snapPoints = [560]
+export const snapPoints = [520, '100%']
 
 export const Component = observer(({did}: {did: string}) => {
   const store = useStores()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
-  const navigation = useNavigation<NavigationProp>()
   const [model] = useState(new ProfileModel(store, {actor: did}))
   const {screen} = useAnalytics()
 
+  // track the navigator state to detect if a page-load occurred
+  const navState = useNavigationState(s => s)
+  const [initNavState] = useState(navState)
+  const isLoading = initNavState !== navState
+
   useEffect(() => {
     screen('Profile:Preview')
     model.setup()
   }, [model, screen])
 
-  const onPressViewProfile = useCallback(() => {
-    navigation.dispatch(StackActions.push('Profile', {name: model.handle}))
-    store.shell.closeModal()
-  }, [navigation, store, model])
-
   return (
-    <View style={pal.view}>
+    <View style={[pal.view, s.flex1]}>
-      <View style={styles.headerWrapper}>
+      <View
+        style={[
+          styles.headerWrapper,
+          isLoading && isIOS && styles.headerPositionAdjust,
+        ]}>
         <ProfileHeader view={model} hideBackButton onRefreshAll={() => {}} />
       </View>
-      <View style={[styles.buttonsContainer, pal.view]}>
+      <View style={[styles.hintWrapper, pal.view]}>
-        <View style={styles.buttons}>
+        <View style={styles.hint}>
-          <Button
+          {isLoading ? (
-            type="inverted"
+            <ActivityIndicator />
-            style={[styles.button, styles.buttonWide]}
+          ) : (
-            onPress={onPressViewProfile}
+            <>
-            accessibilityLabel="View profile"
+              <InfoCircleIcon size={21} style={pal.textLight} />
-            accessibilityHint="">
+              <ThemedText type="xl" fg="light">
-            <Text type="button-lg" style={palInverted.text}>
+                Swipe up to see more
-              View Profile
+              </ThemedText>
-            </Text>
+            </>
-          </Button>
+          )}
-          <Button
-            type="default"
-            style={styles.button}
-            onPress={() => store.shell.closeModal()}
-            accessibilityLabel="Close this preview"
-            accessibilityHint="">
-            <Text type="button-lg" style={pal.text}>
-              Close
-            </Text>
-          </Button>
         </View>
       </View>
     </View>
@@ -68,22 +61,18 @@ const styles = StyleSheet.create({
   headerWrapper: {
     height: 440,
   },
-  buttonsContainer: {
+  headerPositionAdjust: {
-    height: 120,
+    // HACK align the header for the profilescreen transition -prf
+    paddingTop: 23,
   },
-  buttons: {
+  hintWrapper: {
-    flexDirection: 'row',
+    height: 80,
-    gap: 8,
-    paddingHorizontal: 14,
-    paddingTop: 16,
   },
-  button: {
+  hint: {
-    flex: 2,
     flexDirection: 'row',
     justifyContent: 'center',
-    paddingVertical: 12,
+    gap: 8,
-  },
+    paddingHorizontal: 14,
-  buttonWide: {
+    borderRadius: 6,
-    flex: 3,
   },
 })

yarn.lock

@@ -6343,6 +6343,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.once@^4.1.7":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.once/-/lodash.once-4.1.7.tgz#84bc1f711725f6cd6d8be04365623141e09bc007"
+  integrity sha512-XWhnXzWkxoleOoXKmzUtep8vT+wiiQQgmPD+wzG0yO0bdlszmnqHRb2WiY5hK/8V0DTet1+z9DJj9cnbdAhWng==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.samplesize@^4.2.7":
   version "4.2.7"
   resolved "https://registry.yarnpkg.com/@types/lodash.samplesize/-/lodash.samplesize-4.2.7.tgz#15784dd9e54aa1bf043552bdb533b83fcf50b82f"
@@ -13912,7 +13919,7 @@ lodash.omit@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
   integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
 
-lodash.once@^4.0.0:
+lodash.once@^4.0.0, lodash.once@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==