Some styling of empty list chats states (#4124)

src/screens/Messages/List/index.tsx

@@ -14,16 +14,20 @@ import {useListConvos} from '#/state/queries/messages/list-converations'
 import {List} from '#/view/com/util/List'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {MessagesNUX} from '#/components/dms/MessagesNUX'
 import {NewChat} from '#/components/dms/NewChatDialog'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import {Link} from '#/components/Link'
-import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
+import {ListFooter} from '#/components/Lists'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'
 import {ChatListItem} from './ChatListItem'
@@ -82,14 +86,13 @@ export function MessagesScreen({navigation, route}: Props) {
     isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
+    isError,
     error,
     refetch,
   } = useListConvos({refetchInterval: 15_000})
 
   useRefreshOnFocus(refetch)
 
-  const isError = !!error
-
   const conversations = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.convos)
@@ -133,34 +136,88 @@ export function MessagesScreen({navigation, route}: Props) {
     return (
       <View style={a.flex_1}>
         <MessagesNUX />
-        {gtMobile ? (
-          <CenteredView sideBorders>
+
+        <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
+          {gtMobile ? (
             <DesktopHeader
               newChatControl={newChatControl}
               onNavigateToSettings={onNavigateToSettings}
             />
-          </CenteredView>
-        ) : (
-          <ViewHeader
-            title={_(msg`Messages`)}
-            renderButton={renderButton}
-            showBorder
-            canGoBack={false}
-          />
-        )}
-        {!isError && <NewChat onNewChat={onNewChat} control={newChatControl} />}
-        <ListMaybePlaceholder
-          isLoading={isLoading}
-          isError={isError}
-          emptyType="results"
-          emptyTitle={_(msg`No chats yet`)}
-          emptyMessage={_(
-            msg`You have no chats yet. Start a conversation with someone!`,
+          ) : (
+            <ViewHeader
+              title={_(msg`Messages`)}
+              renderButton={renderButton}
+              showBorder
+              canGoBack={false}
+            />
           )}
-          errorMessage={cleanError(error)}
-          onRetry={isError ? refetch : undefined}
-          hideBackButton
-        />
+
+          {isLoading ? (
+            <View style={[a.align_center, a.pt_3xl, web({paddingTop: '10vh'})]}>
+              <Loader size="xl" />
+            </View>
+          ) : (
+            <>
+              {isError ? (
+                <>
+                  <View style={[a.pt_3xl, a.align_center]}>
+                    <CircleInfo
+                      width={48}
+                      fill={t.atoms.border_contrast_low.borderColor}
+                    />
+                    <Text style={[a.pt_md, a.pb_sm, a.text_2xl, a.font_bold]}>
+                      <Trans>Whoops!</Trans>
+                    </Text>
+                    <Text
+                      style={[
+                        a.text_md,
+                        a.pb_xl,
+                        a.text_center,
+                        a.leading_snug,
+                        t.atoms.text_contrast_medium,
+                        {maxWidth: 360},
+                      ]}>
+                      {cleanError(error)}
+                    </Text>
+
+                    <Button
+                      label={_(msg`Reload conversations`)}
+                      size="medium"
+                      color="secondary"
+                      variant="solid"
+                      onPress={() => refetch()}>
+                      <ButtonText>Retry</ButtonText>
+                      <ButtonIcon icon={Retry} position="right" />
+                    </Button>
+                  </View>
+                </>
+              ) : (
+                <>
+                  <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]}>
+                      <Trans>Nothing here</Trans>
+                    </Text>
+                    <Text
+                      style={[
+                        a.text_md,
+                        a.pb_xl,
+                        a.text_center,
+                        a.leading_snug,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>You have no conversations yet. Start one!</Trans>
+                    </Text>
+                  </View>
+                </>
+              )}
+            </>
+          )}
+        </CenteredView>
+
+        {!isLoading && !isError && (
+          <NewChat onNewChat={onNewChat} control={newChatControl} />
+        )}
       </View>
     )
   }