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,8 +35,10 @@ 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')
+  require('../src/components/FileUploadingPreview/UploadingPreview.stories')
 }, module)
 
 const StorybookUIRoot = getStorybookUI({

packages/mobile/e2e/storybook.test.js

@@ -15,6 +15,11 @@ const { ios } = info
 
 jest.setTimeout(9000000)
 
+const blacklist = [
+  'ConnectionProcess',
+  'UploadingPreview'
+]
+
 /* eslint-disable no-undef */
 describe('Storybook', () => {
   let stories = []
@@ -31,7 +36,9 @@ describe('Storybook', () => {
         if (item.endsWith('.stories.tsx')) {
           const scenarios = await listScenarios(dirname, item)
           const component = item.split('.')[0]
-          files.push([dirname, item, component, scenarios])
+          if (!blacklist.includes(component)) {
+            files.push([dirname, item, component, scenarios])
+          }
         }
       }
     }

packages/mobile/ios/Podfile.lock

@@ -555,14 +555,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: a83ceaa8a8581003a623facdb3c44f6d4f342ac5
   FBReactNativeSpec: 85eee79837cb797ab6176f0243a2b40511c09158
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: 5c6fd63b03abb06947d348dadac51c93e3485bd8
   RCTTypeSafety: 1c66daedd66f674e39ce9f40782f0d490c78b175
   React: e11ca7cdc7aa4ddd7e6a59278b808cfe17ebbd9f

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,73 +145,76 @@ 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: 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',
-                width: '100%',
+                paddingBottom: Platform.select({ ios: 20, android: 0 }),
               }}
             >
-              <Input
-                ref={messageInputRef}
-                onChangeText={onInputTextChange}
-                placeholder={`Message #${channel?.name}`}
-                multiline={true}
-                wrapperStyle={{ width: didKeyboardShow || areFilesUploaded ? '75%' : '85%' }}
-              />
               <View
                 style={{
-                  paddingLeft: 10,
-                  paddingRight: 10,
-                  gap: 5,
-                  flexDirection: 'row',
-                  width: didKeyboardShow || areFilesUploaded ? '25%' : '15%',
+                  width: '100%',
+                  paddingLeft: defaultPadding,
+                  paddingRight: 0,
                 }}
               >
-                <AttachmentButton onPress={openAttachments} />
-                {(didKeyboardShow || areFilesUploaded) && (
-                  <MessageSendButton onPress={onPress} disabled={shouldDisableSubmit} />
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    width: '100%',
+                  }}
+                >
+                  <Input
+                    ref={messageInputRef}
+                    onChangeText={onInputTextChange}
+                    placeholder={`Message #${channel?.name}`}
+                    multiline={true}
+                    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>
+                {uploadedFiles && (
+                  <UploadFilesPreviewsComponent filesData={uploadedFiles} removeFile={removeFilePreview} />
                 )}
               </View>
             </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>
+    `)
+  })
+})