forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Dejank navigation between thread posts (#2625)
* Dejank parent thread spinner
* Fix bottom border/spinner jank
* Revert unnecessary change
+23
-45
+23
-38
src/view/com/post-thread/PostThread.tsx
+23
-38
src/view/com/post-thread/PostThread.tsx
···
45
45
import {logger} from '#/logger'
46
46
import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
47
47
48
-
const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 2}
48
+
const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 1}
49
49
50
50
const TOP_COMPONENT = {_reactKey: '__top_component__'}
51
-
const PARENT_SPINNER = {_reactKey: '__parent_spinner__'}
52
51
const REPLY_PROMPT = {_reactKey: '__reply__'}
53
52
const DELETED = {_reactKey: '__deleted__'}
54
53
const BLOCKED = {_reactKey: '__blocked__'}
···
59
58
type YieldedItem =
60
59
| ThreadPost
61
60
| typeof TOP_COMPONENT
62
-
| typeof PARENT_SPINNER
63
61
| typeof REPLY_PROMPT
64
62
| typeof DELETED
65
63
| typeof BLOCKED
66
-
| typeof PARENT_SPINNER
67
64
68
65
export function PostThread({
69
66
uri,
···
152
149
const {hasSession} = useSession()
153
150
const {_} = useLingui()
154
151
const pal = usePalette('default')
155
-
const {isTablet, isMobile, isDesktop, isTabletOrMobile} = useWebMediaQueries()
152
+
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
156
153
const ref = useRef<ListMethods>(null)
157
154
const highlightedPostRef = useRef<View | null>(null)
158
155
const needsScrollAdjustment = useRef<boolean>(
···
168
165
169
166
// construct content
170
167
const posts = React.useMemo(() => {
171
-
let arr = [TOP_COMPONENT].concat(
172
-
Array.from(
173
-
flattenThreadSkeleton(
174
-
sortThread(thread, threadViewPrefs),
175
-
hasSession,
176
-
treeView,
177
-
),
168
+
let arr = Array.from(
169
+
flattenThreadSkeleton(
170
+
sortThread(thread, threadViewPrefs),
171
+
hasSession,
172
+
treeView,
178
173
),
179
174
)
180
175
if (arr.length > maxVisible) {
···
215
210
// wait for loading to finish
216
211
if (thread.type === 'post' && !!thread.parent) {
217
212
function onMeasure(pageY: number) {
218
-
let spinnerHeight = 0
219
-
if (isDesktop) {
220
-
spinnerHeight = 40
221
-
} else if (isTabletOrMobile) {
222
-
spinnerHeight = 82
223
-
}
224
213
ref.current?.scrollToOffset({
225
214
animated: false,
226
-
offset: pageY - spinnerHeight,
215
+
offset: pageY,
227
216
})
228
217
}
229
218
if (isNative) {
···
242
231
}
243
232
needsScrollAdjustment.current = false
244
233
}
245
-
}, [thread, isDesktop, isTabletOrMobile])
234
+
}, [thread])
246
235
247
236
const onPTR = React.useCallback(async () => {
248
237
setIsPTRing(true)
···
257
246
const renderItem = React.useCallback(
258
247
({item, index}: {item: YieldedItem; index: number}) => {
259
248
if (item === TOP_COMPONENT) {
260
-
return isTablet ? (
249
+
return isTabletOrMobile ? (
261
250
<ViewHeader
262
251
title={_(msg({message: `Post`, context: 'description'}))}
263
252
/>
264
253
) : null
265
-
} else if (item === PARENT_SPINNER) {
266
-
return (
267
-
<View style={styles.parentSpinner}>
268
-
<ActivityIndicator />
269
-
</View>
270
-
)
271
254
} else if (item === REPLY_PROMPT && hasSession) {
272
255
return (
273
256
<View>
···
318
301
// @ts-ignore web-only
319
302
style={{
320
303
// Leave enough space below that the scroll doesn't jump
321
-
height: isNative ? 400 : '100vh',
304
+
height: isNative ? 600 : '100vh',
322
305
borderTopWidth: 1,
323
306
borderColor: pal.colors.border,
324
307
}}
···
326
309
)
327
310
} else if (item === CHILD_SPINNER) {
328
311
return (
329
-
<View style={styles.childSpinner}>
312
+
<View style={[pal.border, styles.childSpinner]}>
330
313
<ActivityIndicator />
331
314
</View>
332
315
)
···
361
344
},
362
345
[
363
346
hasSession,
364
-
isTablet,
347
+
isTabletOrMobile,
365
348
isMobile,
366
349
onPressReply,
367
350
pal.border,
···
507
490
node: ThreadNode,
508
491
hasSession: boolean,
509
492
treeView: boolean,
493
+
isTraversingReplies: boolean = false,
510
494
): Generator<YieldedItem, void> {
511
495
if (node.type === 'post') {
512
-
if (node.parent) {
513
-
yield* flattenThreadSkeleton(node.parent, hasSession, treeView)
514
-
} else if (node.ctx.isParentLoading) {
515
-
yield PARENT_SPINNER
496
+
if (!node.ctx.isParentLoading) {
497
+
if (node.parent) {
498
+
yield* flattenThreadSkeleton(node.parent, hasSession, treeView, false)
499
+
} else if (!isTraversingReplies) {
500
+
yield TOP_COMPONENT
501
+
}
516
502
}
517
503
if (!hasSession && node.ctx.depth > 0 && hasPwiOptOut(node)) {
518
504
return
···
523
509
}
524
510
if (node.replies?.length) {
525
511
for (const reply of node.replies) {
526
-
yield* flattenThreadSkeleton(reply, hasSession, treeView)
512
+
yield* flattenThreadSkeleton(reply, hasSession, treeView, true)
527
513
if (!treeView && !node.ctx.isHighlightedPost) {
528
514
break
529
515
}
···
567
553
paddingHorizontal: 18,
568
554
paddingVertical: 18,
569
555
},
570
-
parentSpinner: {
571
-
paddingVertical: 10,
572
-
},
573
556
childSpinner: {
557
+
borderTopWidth: 1,
558
+
paddingTop: 40,
574
559
paddingBottom: 200,
575
560
},
576
561
})
-7
src/view/screens/PostThread.tsx
-7
src/view/screens/PostThread.tsx
···
5
5
import {useQueryClient} from '@tanstack/react-query'
6
6
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
7
7
import {makeRecordUri} from 'lib/strings/url-helpers'
8
-
import {ViewHeader} from '../com/util/ViewHeader'
9
8
import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
10
9
import {ComposePrompt} from 'view/com/composer/Prompt'
11
10
import {s} from 'lib/styles'
···
18
17
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
19
18
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
20
19
import {useSetMinimalShellMode} from '#/state/shell'
21
-
import {useLingui} from '@lingui/react'
22
-
import {msg} from '@lingui/macro'
23
20
import {useResolveUriQuery} from '#/state/queries/resolve-uri'
24
21
import {ErrorMessage} from '../com/util/error/ErrorMessage'
25
22
import {CenteredView} from '../com/util/Views'
···
30
27
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
31
28
export function PostThreadScreen({route}: Props) {
32
29
const queryClient = useQueryClient()
33
-
const {_} = useLingui()
34
30
const {hasSession} = useSession()
35
31
const {fabMinimalShellTransform} = useMinimalShellMode()
36
32
const setMinimalShellMode = useSetMinimalShellMode()
···
79
75
80
76
return (
81
77
<View style={s.hContentRegion}>
82
-
{isMobile && (
83
-
<ViewHeader title={_(msg({message: 'Post', context: 'description'}))} />
84
-
)}
85
78
<View style={s.flex1}>
86
79
{uriError ? (
87
80
<CenteredView>