forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
skeletons for chat list (#7907)
authored by
Samuel Newman
and committed by
GitHub
a62fe855
c5d9e282
+52
-14
+7
-9
src/screens/Messages/ChatList.tsx
+7
-9
src/screens/Messages/ChatList.tsx
···
20
20
import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
21
21
import {useSession} from '#/state/session'
22
22
import {List, ListRef} from '#/view/com/util/List'
23
-
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
23
+
import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
24
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
24
25
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
25
26
import {DialogControlProps, useDialogControl} from '#/components/Dialog'
26
27
import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
···
33
34
import * as Layout from '#/components/Layout'
34
35
import {Link} from '#/components/Link'
35
36
import {ListFooter} from '#/components/Lists'
36
-
import {Loader} from '#/components/Loader'
37
37
import {Text} from '#/components/Typography'
38
38
import {ChatListItem} from './components/ChatListItem'
39
39
import {InboxPreview} from './components/InboxPreview'
···
211
211
<Layout.Screen>
212
212
<Header newChatControl={newChatControl} />
213
213
<Layout.Center>
214
+
<InboxPreview
215
+
count={inboxPreviewConvos.length}
216
+
profiles={inboxPreviewConvos}
217
+
/>
214
218
{isLoading ? (
215
-
<View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
216
-
<Loader size="xl" />
217
-
</View>
219
+
<ChatListLoadingPlaceholder />
218
220
) : (
219
221
<>
220
222
{isError ? (
···
255
257
</>
256
258
) : (
257
259
<>
258
-
<InboxPreview
259
-
count={inboxPreviewConvos.length}
260
-
profiles={inboxPreviewConvos}
261
-
/>
262
260
<View style={[a.pt_3xl, a.align_center]}>
263
261
<Message width={48} fill={t.palette.primary_500} />
264
262
<Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+3
-5
src/screens/Messages/Inbox.tsx
+3
-5
src/screens/Messages/Inbox.tsx
···
23
23
import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
24
24
import {FAB} from '#/view/com/util/fab/FAB'
25
25
import {List} from '#/view/com/util/List'
26
+
import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
26
27
import * as Toast from '#/view/com/util/Toast'
27
-
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
28
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
28
29
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
29
30
import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
30
31
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
···
34
35
import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
35
36
import * as Layout from '#/components/Layout'
36
37
import {ListFooter} from '#/components/Lists'
37
-
import {Loader} from '#/components/Loader'
38
38
import {Text} from '#/components/Typography'
39
39
import {RequestListItem} from './components/RequestListItem'
40
40
···
157
157
return (
158
158
<Layout.Center>
159
159
{isLoading ? (
160
-
<View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
161
-
<Loader size="xl" />
162
-
</View>
160
+
<ChatListLoadingPlaceholder />
163
161
) : (
164
162
<>
165
163
{isError ? (
+42
src/view/com/util/LoadingPlaceholder.tsx
+42
src/view/com/util/LoadingPlaceholder.tsx
···
1
+
import {useMemo} from 'react'
1
2
import {
2
3
DimensionValue,
3
4
StyleProp,
···
278
279
<FeedLoadingPlaceholder />
279
280
<FeedLoadingPlaceholder />
280
281
<FeedLoadingPlaceholder />
282
+
</>
283
+
)
284
+
}
285
+
286
+
export function ChatListItemLoadingPlaceholder({
287
+
style,
288
+
}: {
289
+
style?: StyleProp<ViewStyle>
290
+
}) {
291
+
const t = useTheme_NEW()
292
+
const random = useMemo(() => Math.random(), [])
293
+
return (
294
+
<View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>
295
+
<LoadingPlaceholder width={52} height={52} style={a.rounded_full} />
296
+
<View>
297
+
<LoadingPlaceholder width={140} height={12} style={a.mt_xs} />
298
+
<LoadingPlaceholder width={120} height={8} style={a.mt_sm} />
299
+
<LoadingPlaceholder
300
+
width={80 + random * 100}
301
+
height={8}
302
+
style={a.mt_sm}
303
+
/>
304
+
</View>
305
+
</View>
306
+
)
307
+
}
308
+
309
+
export function ChatListLoadingPlaceholder() {
310
+
return (
311
+
<>
312
+
<ChatListItemLoadingPlaceholder />
313
+
<ChatListItemLoadingPlaceholder />
314
+
<ChatListItemLoadingPlaceholder />
315
+
<ChatListItemLoadingPlaceholder />
316
+
<ChatListItemLoadingPlaceholder />
317
+
<ChatListItemLoadingPlaceholder />
318
+
<ChatListItemLoadingPlaceholder />
319
+
<ChatListItemLoadingPlaceholder />
320
+
<ChatListItemLoadingPlaceholder />
321
+
<ChatListItemLoadingPlaceholder />
322
+
<ChatListItemLoadingPlaceholder />
281
323
</>
282
324
)
283
325
}