Skip to content

Commit

Permalink
Prettify chat loading view
Browse files Browse the repository at this point in the history
  • Loading branch information
siepra committed Sep 22, 2023
1 parent fec4a6c commit 063c20e
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 94 deletions.
2 changes: 2 additions & 0 deletions packages/mobile/.storybook/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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)
Expand Down
115 changes: 59 additions & 56 deletions packages/mobile/src/components/Chat/Chat.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -91,7 +91,7 @@ export const CreateCommunity: FC<CreateCommunityProps> = ({
</KeyboardAvoidingView>
</View>
) : (
<Loading />
<Splash />
)}
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -111,7 +110,7 @@ export const JoinCommunity: FC<JoinCommunityProps> = ({
</KeyboardAvoidingView>
</View>
) : (
<Loading />
<Splash />
)}
</>
)
Expand Down
109 changes: 109 additions & 0 deletions packages/mobile/src/components/Loading/Loading.component.test.tsx
Original file line number Diff line number Diff line change
@@ -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>
`)
})
})
50 changes: 21 additions & 29 deletions packages/mobile/src/components/Loading/Loading.component.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
Expand Down
9 changes: 7 additions & 2 deletions packages/mobile/src/components/Loading/Loading.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { storiesOf } from '@storybook/react-native'
import React from 'react'
import { storiesOf } from '@storybook/react-native'

import { Loading } from './Loading.component'

storiesOf('Loading', module).add('Default', () => <Loading />)
storiesOf('Loading', module).add('Default', () => (
<Loading
title={'Creating community “Disco-fever”'}
caption={'Additional info if needed can go here otherwise this is hidden.'}
/>
))
Loading

0 comments on commit 063c20e

Please sign in to comment.