skeletons for chat list (#7907)

src/screens/Messages/ChatList.tsx

@@ -20,7 +20,8 @@ import {useLeftConvos} from '#/state/queries/messages/leave-conversation'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useSession} from '#/state/session'
 import {List, ListRef} from '#/view/com/util/List'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
@@ -33,7 +34,6 @@ import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '
 import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
-import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ChatListItem} from './components/ChatListItem'
 import {InboxPreview} from './components/InboxPreview'
@@ -211,10 +211,12 @@ export function MessagesScreen({navigation, route}: Props) {
       <Layout.Screen>
         <Header newChatControl={newChatControl} />
         <Layout.Center>
+          <InboxPreview
+            count={inboxPreviewConvos.length}
+            profiles={inboxPreviewConvos}
+          />
           {isLoading ? (
-            <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
-              <Loader size="xl" />
-            </View>
+            <ChatListLoadingPlaceholder />
           ) : (
             <>
               {isError ? (
@@ -255,10 +257,6 @@ export function MessagesScreen({navigation, route}: Props) {
                 </>
               ) : (
                 <>
-                  <InboxPreview
-                    count={inboxPreviewConvos.length}
-                    profiles={inboxPreviewConvos}
-                  />
                   <View style={[a.pt_3xl, a.align_center]}>
                     <Message width={48} fill={t.palette.primary_500} />
                     <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>

src/screens/Messages/Inbox.tsx

@@ -23,8 +23,9 @@ import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
 import {FAB} from '#/view/com/util/fab/FAB'
 import {List} from '#/view/com/util/List'
+import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -34,7 +35,6 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components
 import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
 import * as Layout from '#/components/Layout'
 import {ListFooter} from '#/components/Lists'
-import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {RequestListItem} from './components/RequestListItem'
 
@@ -157,9 +157,7 @@ function RequestList({
     return (
       <Layout.Center>
         {isLoading ? (
-          <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
-            <Loader size="xl" />
-          </View>
+          <ChatListLoadingPlaceholder />
         ) : (
           <>
             {isError ? (