zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source 
* 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
This commit is contained in:
Paul Frazee 2023-08-03 10:25:17 -07:00 • committed by GitHub
parent 1211c353d0
commit 96280d5f1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 98 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/view/com/modals/Modal.tsx
View file

@ -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>