Prettify chat loading view

CHANGELOG.md

@@ -1,5 +1,7 @@
 [unreleased]
 
+* Prettify loading component on Chat screen (mobile)
+
 * Running Chromatic tests for forked PRs
 
 * Bump github actions/* to versions using node16

packages/mobile/.storybook/index.js

@@ -15,6 +15,7 @@ addDecorator(withNavigation)
 configure(() => {
   require('../src/components/JoinCommunity/JoinCommunity.stories')
   require('../src/components/LeaveCommunity/LeaveCommunity.stories')
+  require('../src/components/ConnectionProcess/ConnectionProcess.stories')
   require('../src/components/ContextMenu/ContextMenu.stories')
   require('../src/components/ConfirmationBox/ConfirmationBox.stories')
   require('../src/components/CreateCommunity/CreateCommunity.stories')
@@ -34,6 +35,7 @@ configure(() => {
   require('../src/components/MessageSendButton/MessageSendButton.stories')
   require('../src/components/InitCheck/InitCheck.stories')
   require('../src/components/Loading/Loading.stories')
+  require('../src/components/Splash/Splash.stories')
   require('../src/components/Success/Success.stories')
   require('../src/components/Error/Error.stories')
 }, module)

packages/mobile/src/components/Chat/Chat.component.tsx

@@ -2,17 +2,17 @@ import React, { FC, useRef, useState, useEffect, useCallback } from 'react'
 import { Keyboard, View, FlatList, TextInput, KeyboardAvoidingView, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Appbar } from '../../components/Appbar/Appbar.component'
+import { Loading } from '../Loading/Loading.component'
 import { ImagePreviewModal } from '../../components/ImagePreview/ImagePreview.component'
-import { Spinner } from '../Spinner/Spinner.component'
 import { Message } from '../Message/Message.component'
 import { Input } from '../Input/Input.component'
 import { MessageSendButton } from '../MessageSendButton/MessageSendButton.component'
 import { ChannelMessagesComponentProps, ChatProps } from './Chat.types'
 import { FileActionsProps } from '../UploadedFile/UploadedFile.types'
-import { defaultTheme } from '../../styles/themes/default.theme'
 import { AttachmentButton } from '../AttachmentButton/AttachmentButton.component'
 import DocumentPicker, { DocumentPickerResponse, types } from 'react-native-document-picker'
 import UploadFilesPreviewsComponent from '../FileUploadingPreview/UploadingPreview.component'
+import { defaultTheme } from '../../styles/themes/default.theme'
 
 export const Chat: FC<ChatProps & FileActionsProps> = ({
   contextMenu,
@@ -145,75 +145,79 @@ export const Chat: FC<ChatProps & FileActionsProps> = ({
         }}
       >
         {messages.count === 0 ? (
-          <Spinner description='Loading messages' />
+          <Loading title={'Loading messages'} caption={'Chat will become available shortly'} />
         ) : (
-          <FlatList
-            // There's a performance issue with inverted prop on FlatList, so we're double rotating the elements as a workaround
-            // https://github.com/facebook/react-native/issues/30034
-            style={{
-              transform: [{ rotate: '180deg' }],
-              paddingLeft: defaultPadding,
-              paddingRight: defaultPadding,
-            }}
-            data={Object.keys(messages.groups).reverse()}
-            keyExtractor={item => item}
-            renderItem={item => {
-              return <View style={{ transform: [{ rotate: '180deg' }] }}>{renderItem(item)}</View>
-            }}
-            onEndReached={() => {
-              loadMessagesAction(true)
-            }}
-            onEndReachedThreshold={0.7}
-            showsVerticalScrollIndicator={false}
-          />
-        )}
-        <View
-          style={{
-            flexDirection: 'row',
-            paddingBottom: Platform.select({ ios: 20, android: 0 }),
-          }}
-        >
-          <View
-            style={{
-              width: '100%',
-              paddingLeft: defaultPadding,
-              paddingRight: !didKeyboardShow && !areFilesUploaded ? defaultPadding : 0,
-            }}
-          >
+          <>
+            <FlatList
+              // There's a performance issue with inverted prop on FlatList, so we're double rotating the elements as a workaround
+              // https://github.com/facebook/react-native/issues/30034
+              style={{
+                transform: [{ rotate: '180deg' }],
+                paddingLeft: defaultPadding,
+                paddingRight: defaultPadding,
+              }}
+              data={Object.keys(messages.groups).reverse()}
+              keyExtractor={item => item}
+              renderItem={item => {
+                return <View style={{ transform: [{ rotate: '180deg' }] }}>{renderItem(item)}</View>
+              }}
+              onEndReached={() => {
+                loadMessagesAction(true)
+              }}
+              onEndReachedThreshold={0.7}
+              showsVerticalScrollIndicator={false}
+            />
             <View
               style={{
                 flexDirection: 'row',
+                paddingBottom: Platform.select({ ios: 20, android: 0 }),
               }}
             >
-              <View style={{ flex: 1 }}>
-                <View style={{ justifyContent: 'center' }}>
+              <View
+                style={{
+                  width: '100%',
+                  paddingLeft: defaultPadding,
+                  paddingRight: 0,
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    width: '100%',
+                  }}
+                >
                   <Input
                     ref={messageInputRef}
                     onChangeText={onInputTextChange}
                     placeholder={`Message #${channel?.name}`}
                     multiline={true}
-                    style={{ paddingRight: 50 }}
-                    round
+                    wrapperStyle={{ width: didKeyboardShow || areFilesUploaded ? '75%' : '85%' }}
                   />
+                  <View
+                    style={{
+                      paddingLeft: 10,
+                      paddingRight: 10,
+                      gap: 5,
+                      flexDirection: 'row',
+                      width: didKeyboardShow || areFilesUploaded ? '25%' : '15%',
+                    }}
+                  >
+                    <AttachmentButton onPress={openAttachments} />
+                    {(didKeyboardShow || areFilesUploaded) && (
+                      <MessageSendButton onPress={onPress} disabled={shouldDisableSubmit} />
+                    )}
+                  </View>
                 </View>
-                <View
-                  style={{
-                    position: 'absolute',
-                    height: '100%',
-                    right: 10,
-                    justifyContent: 'center',
-                  }}
-                >
-                  <AttachmentButton onPress={openAttachments} />
-                </View>
+                {uploadedFiles && (
+                  <UploadFilesPreviewsComponent filesData={uploadedFiles} removeFile={removeFilePreview} />
+                )}
               </View>
               {(didKeyboardShow || areFilesUploaded) && (
                 <MessageSendButton onPress={onPress} disabled={shouldDisableSubmit} />
               )}
             </View>
-            {uploadedFiles && <UploadFilesPreviewsComponent filesData={uploadedFiles} removeFile={removeFilePreview} />}
-          </View>
-        </View>
+          </>
+        )}
       </KeyboardAvoidingView>
       {imagePreview && setImagePreview && (
         <ImagePreviewModal

packages/mobile/src/components/CreateCommunity/CreateCommunity.component.tsx

@@ -7,7 +7,7 @@ import { Typography } from '../Typography/Typography.component'
 import { TextWithLink } from '../TextWithLink/TextWithLink.component'
 
 import { CreateCommunityProps } from './CreateCommunity.types'
-import { Loading } from '../Loading/Loading.component'
+import { Splash } from '../Splash/Splash.component'
 
 export const CreateCommunity: FC<CreateCommunityProps> = ({
   createCommunityAction,
@@ -91,7 +91,7 @@ export const CreateCommunity: FC<CreateCommunityProps> = ({
           </KeyboardAvoidingView>
         </View>
       ) : (
-        <Loading />
+        <Splash />
       )}
     </>
   )

packages/mobile/src/components/JoinCommunity/JoinCommunity.component.tsx

@@ -8,9 +8,8 @@ import { TextWithLink } from '../TextWithLink/TextWithLink.component'
 
 import { JoinCommunityProps } from './JoinCommunity.types'
 import { getInvitationCodes } from '@quiet/state-manager'
-import { ONION_ADDRESS_REGEX } from '@quiet/common'
 
-import { Loading } from '../Loading/Loading.component'
+import { Splash } from '../Splash/Splash.component'
 
 export const JoinCommunity: FC<JoinCommunityProps> = ({
   joinCommunityAction,
@@ -111,7 +110,7 @@ export const JoinCommunity: FC<JoinCommunityProps> = ({
           </KeyboardAvoidingView>
         </View>
       ) : (
-        <Loading />
+        <Splash />
       )}
     </>
   )

packages/mobile/src/components/Loading/Loading.component.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { renderComponent } from '../../utils/functions/renderComponent/renderComponent'
+
+import { Loading } from './Loading.component'
+
+describe('Loading component', () => {
+  it('should match inline snapshot', () => {
+    const { toJSON } = renderComponent(
+      <Loading
+        title={'Creating community “Disco-fever”'}
+        caption={'Additional info if needed can go here otherwise this is hidden.'}
+      />
+    )
+
+    expect(toJSON()).toMatchInlineSnapshot(`
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "justifyContent": "center",
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#F0F0F0",
+              "borderRadius": 4,
+              "height": 4,
+              "width": 300,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#67BFD3",
+                "borderRadius": 4,
+                "height": 4,
+                "width": 220,
+              }
+            }
+          />
+        </View>
+        <View
+          style={
+            {
+              "flexDirection": "column",
+              "gap": 8,
+            }
+          }
+        >
+          <Text
+            color="main"
+            fontSize={14}
+            horizontalTextAlign="left"
+            style={
+              [
+                {
+                  "color": "#000000",
+                  "fontFamily": "Rubik-Regular",
+                  "fontSize": 14,
+                  "textAlign": "left",
+                  "textAlignVertical": "center",
+                },
+                {
+                  "lineHeight": 20,
+                  "marginTop": 8,
+                  "textAlign": "center",
+                },
+              ]
+            }
+            verticalTextAlign="center"
+          >
+            Creating community “Disco-fever”
+          </Text>
+          <View
+            style={
+              {
+                "width": 250,
+              }
+            }
+          >
+            <Text
+              color="gray50"
+              fontSize={12}
+              horizontalTextAlign="center"
+              style={
+                [
+                  {
+                    "color": "#7F7F7F",
+                    "fontFamily": "Rubik-Regular",
+                    "fontSize": 12,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+              verticalTextAlign="center"
+            >
+              Additional info if needed can go here otherwise this is hidden.
+            </Text>
+          </View>
+        </View>
+      </View>
+    `)
+  })
+})

packages/mobile/src/components/Loading/Loading.component.tsx

@@ -1,44 +1,36 @@
 import React, { FC } from 'react'
-import { Image, View } from 'react-native'
-import deviceInfoModule from 'react-native-device-info'
+import { View } from 'react-native'
 import { Typography } from '../Typography/Typography.component'
-import { defaultTheme } from '../../styles/themes/default.theme'
-import { appImages } from '../../assets'
 
-export const Loading: FC = () => {
+export interface LoadingProps {
+  title: string
+  caption?: string
+  progress?: number
+}
+
+export const Loading: FC<LoadingProps> = ({ title, caption, progress = 220 }) => {
   return (
     <View
       style={{
         flex: 1,
-        alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: defaultTheme.palette.background.white,
+        alignItems: 'center',
       }}
-      testID='loading'
     >
-      <Image
-        source={appImages.quiet_icon}
-        style={{
-          marginTop: 20,
-          marginBottom: 46,
-          resizeMode: 'cover',
-          width: 84,
-          height: 84,
-          borderRadius: 16,
-        }}
-      />
-      <View style={{ gap: 6, alignItems: 'center' }}>
-        <Typography fontSize={14} fontWeight={'medium'}>
-          Starting backend
-        </Typography>
-        <Typography fontSize={12} color={'gray50'}>
-          This can take some time
-        </Typography>
+      <View style={{ width: 300, height: 4, backgroundColor: '#F0F0F0', borderRadius: 4 }}>
+        <View style={{ backgroundColor: '#67BFD3', height: 4, width: progress, borderRadius: 4 }}></View>
       </View>
-      <View style={{ margin: 20 }}>
-        <Typography fontSize={12} color={'grayDark'}>
-          {`v ${deviceInfoModule.getVersion()}`}
+      <View style={{ flexDirection: 'column', gap: 8 }}>
+        <Typography fontSize={14} style={{ lineHeight: 20, textAlign: 'center', marginTop: 8 }}>
+          {title}
         </Typography>
+        {caption && (
+          <View style={{ width: 250 }}>
+            <Typography fontSize={12} color={'gray50'} horizontalTextAlign={'center'}>
+              {caption}
+            </Typography>
+          </View>
+        )}
       </View>
     </View>
   )