forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[🐴] Skeleton header (#3921)
authored by
Samuel Newman
and committed by
GitHub
55ac287d
3bac0182
+45
-22
+45
-22
src/screens/Messages/Conversation/index.tsx
+45
-22
src/screens/Messages/Conversation/index.tsx
···
19
19
import {CenteredView} from 'view/com/util/Views'
20
20
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
21
21
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
22
-
import {Button, ButtonText} from '#/components/Button'
23
22
import {ConvoMenu} from '#/components/dms/ConvoMenu'
23
+
import {Error} from '#/components/Error'
24
24
import {ListMaybePlaceholder} from '#/components/Lists'
25
25
import {Text} from '#/components/Typography'
26
26
import {ClipClopGate} from '../gate'
···
54
54
55
55
function Inner() {
56
56
const convo = useConvo()
57
+
const {_} = useLingui()
57
58
58
59
if (
59
60
convo.status === ConvoStatus.Uninitialized ||
60
61
convo.status === ConvoStatus.Initializing
61
62
) {
62
-
return <ListMaybePlaceholder isLoading />
63
+
return (
64
+
<CenteredView style={a.flex_1} sideBorders>
65
+
<Header />
66
+
<ListMaybePlaceholder isLoading />
67
+
</CenteredView>
68
+
)
63
69
}
64
70
65
71
if (convo.status === ConvoStatus.Error) {
66
-
// TODO
67
72
return (
68
-
<View>
69
-
<CenteredView style={{flex: 1}} sideBorders>
70
-
<Text>Something went wrong</Text>
71
-
<Button
72
-
label="Retry"
73
-
onPress={() => {
74
-
convo.error.retry()
75
-
}}>
76
-
<ButtonText>Retry</ButtonText>
77
-
</Button>
78
-
</CenteredView>
79
-
</View>
73
+
<CenteredView style={a.flex_1} sideBorders>
74
+
<Header />
75
+
<Error
76
+
title={_(msg`Something went wrong`)}
77
+
message={_(msg`We couldn't load this conversation`)}
78
+
onRetry={() => convo.error.retry()}
79
+
/>
80
+
</CenteredView>
80
81
)
81
82
}
82
83
···
86
87
87
88
return (
88
89
<KeyboardProvider>
89
-
<CenteredView style={{flex: 1}} sideBorders>
90
+
<CenteredView style={a.flex_1} sideBorders>
90
91
<Header profile={convo.recipients[0]} />
91
92
<MessagesList />
92
93
</CenteredView>
···
97
98
let Header = ({
98
99
profile,
99
100
}: {
100
-
profile: AppBskyActorDefs.ProfileViewBasic
101
+
profile?: AppBskyActorDefs.ProfileViewBasic
101
102
}): React.ReactNode => {
102
103
const t = useTheme()
103
104
const {_} = useLingui()
···
152
153
<View style={{width: 30}} />
153
154
)}
154
155
<View style={[a.align_center, a.gap_sm, a.flex_1]}>
155
-
<PreviewableUserAvatar size={32} profile={profile} />
156
-
<Text style={[a.text_lg, a.font_bold, a.text_center]}>
157
-
{profile.displayName}
158
-
</Text>
156
+
{profile ? (
157
+
<>
158
+
<PreviewableUserAvatar size={32} profile={profile} />
159
+
<Text style={[a.text_lg, a.font_bold, a.text_center]}>
160
+
{profile.displayName}
161
+
</Text>
162
+
</>
163
+
) : (
164
+
<>
165
+
<View
166
+
style={[
167
+
{width: 32, height: 32},
168
+
a.rounded_full,
169
+
t.atoms.bg_contrast_25,
170
+
]}
171
+
/>
172
+
<View
173
+
style={[
174
+
{width: 120, height: 18},
175
+
a.rounded_xs,
176
+
t.atoms.bg_contrast_25,
177
+
a.mb_2xs,
178
+
]}
179
+
/>
180
+
</>
181
+
)}
159
182
</View>
160
-
{convo.status === ConvoStatus.Ready ? (
183
+
{convo.status === ConvoStatus.Ready && profile ? (
161
184
<ConvoMenu
162
185
convo={convo.convo}
163
186
profile={profile}