bug/Joining often gets stuck on waiting for metadata/#1903

CHANGELOG.md

@@ -1,5 +1,7 @@
 [unreleased]
 
+* Better descriptions of the joining process
+
 * Update custom deps repositiries (upload-s3-action, ipfs-pubsub-peer-monitor)
 
 * Add certificates validation.

packages/backend/src/nest/connections-manager/connections-manager.service.ts

@@ -419,6 +419,9 @@ export class ConnectionsManagerService extends EventEmitter implements OnModuleI
   private attachTorEventsListeners() {
     this.logger('attachTorEventsListeners')
 
+    this.tor.on(SocketActionTypes.CONNECTION_PROCESS_INFO, data => {
+      this.serverIoProvider.io.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, data)
+    })
     this.socketService.on(SocketActionTypes.CONNECTION_PROCESS_INFO, data => {
       this.serverIoProvider.io.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, data)
     })

packages/backend/src/nest/socket/socket.service.ts

@@ -154,7 +154,7 @@ export class SocketService extends EventEmitter implements OnModuleInit {
 
         await new Promise<void>(resolve => setTimeout(() => resolve(), 2000))
 
-        this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.WAITING_FOR_METADATA)
+        this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.CONNECTING_TO_COMMUNITY)
       })
 
       socket.on(SocketActionTypes.REGISTER_OWNER_CERTIFICATE, async (payload: RegisterOwnerCertificatePayload) => {

packages/backend/src/nest/tor/tor.service.ts

@@ -5,7 +5,7 @@ import path from 'path'
 import getPort from 'get-port'
 import { removeFilesFromDir } from '../common/utils'
 import { EventEmitter } from 'events'
-import { SocketActionTypes, SupportedPlatform } from '@quiet/types'
+import { ConnectionProcessInfo, SocketActionTypes, SupportedPlatform } from '@quiet/types'
 import { Inject, OnModuleInit } from '@nestjs/common'
 import { ConfigOptions, ServerIoProviderTypes } from '../types'
 import { CONFIG_OPTIONS, QUIET_DIR, SERVER_IO_PROVIDER, TOR_PARAMS_PROVIDER, TOR_PASSWORD_PROVIDER } from '../const'
@@ -227,6 +227,7 @@ export class Tor extends EventEmitter implements OnModuleInit {
 
       this.process.stdout.on('data', (data: any) => {
         this.logger(data.toString())
+
         const regexp = /Bootstrapped 0/
         if (regexp.test(data.toString())) {
           this.spawnHiddenServices()

packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { renderComponent } from '../../testUtils/renderComponent'
 import JoiningPanelComponent from './JoiningPanelComponent'
+import { ConnectionProcessInfo } from '@quiet/types'
 
 describe('Create JoiningPanelComponent', () => {
   it('renders component - owner false', () => {
@@ -10,7 +11,7 @@ describe('Create JoiningPanelComponent', () => {
         openUrl={jest.fn()}
         open={true}
         isOwner={false}
-        torConnectionInfo={{ number: 50, text: 'Initializing storage' }}
+        connectionInfo={{ number: 50, text: ConnectionProcessInfo.BACKEND_MODULES }}
       />
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
@@ -70,7 +71,7 @@ describe('Create JoiningPanelComponent', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-kpkqnh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-1vn3v3s-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column JoiningPanelComponentcontentWrapper css-t0zib5-MuiGrid-root"
@@ -94,11 +95,14 @@ describe('Create JoiningPanelComponent', () => {
                         <div
                           class="JoiningPanelComponentprogress"
                         />
+                        <div
+                          class=""
+                        />
                       </div>
                       <p
                         class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                       >
-                        Initializing storage
+                        Initialized backend modules
                       </p>
                     </div>
                     <p
@@ -144,7 +148,7 @@ describe('Create JoiningPanelComponent', () => {
         openUrl={jest.fn()}
         open={true}
         isOwner={true}
-        torConnectionInfo={{ number: 50, text: 'Initializing storage' }}
+        connectionInfo={{ number: 50, text: ConnectionProcessInfo.BACKEND_MODULES }}
       />
     )
     expect(result.baseElement).toMatchInlineSnapshot(`
@@ -204,7 +208,7 @@ describe('Create JoiningPanelComponent', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-kpkqnh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-1vn3v3s-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column JoiningPanelComponentcontentWrapper css-t0zib5-MuiGrid-root"
@@ -228,11 +232,14 @@ describe('Create JoiningPanelComponent', () => {
                         <div
                           class="JoiningPanelComponentprogress"
                         />
+                        <div
+                          class=""
+                        />
                       </div>
                       <p
                         class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                       >
-                        Initializing storage
+                        Initialized backend modules
                       </p>
                     </div>
                     <p

packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx

@@ -4,6 +4,8 @@ import Modal from '../ui/Modal/Modal'
 import JoinCommunityImg from '../../static/images/join-community.png'
 import { Grid, Typography } from '@mui/material'
 import { Site } from '@quiet/common'
+import { ConnectionProcessInfo } from '@quiet/types'
+import classNames from 'classnames'
 
 const PREFIX = 'JoiningPanelComponent'
 
@@ -19,6 +21,7 @@ const classes = {
   progressBar: `${PREFIX}progressBar`,
   progress: `${PREFIX}progress`,
   progressBarWrapper: `${PREFIX}progressBarWrapper`,
+  animatedProgress: `${PREFIX}animatedProgress`,
 }
 
 const StyledGrid = styled(Grid)(({ theme, width }) => ({
@@ -67,14 +70,31 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
     overflow: 'hidden',
     marginBottom: '8px',
   },
-  [`& .${classes.progress}`]: {
+  '@keyframes width': {
+    from: { width: '150px' },
+    to: { width: '300px' },
+  },
+  [`& .${classes.animatedProgress}`]: {
+    animationName: 'width',
+    animationDuration: '4s',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    transition: '3s all',
     backgroundColor: theme.palette.colors.lushSky,
+    position: 'absolute',
+    zIndex: 1,
+    height: '4px',
+  },
+  [`& .${classes.progress}`]: {
+    backgroundColor: theme.palette.colors.blue,
     width: width,
     height: '4px',
     position: 'relative',
+    zIndex: 2,
   },
   [`& .${classes.progressBarWrapper}`]: {
-    // margin: '16px 0 40px'
+    // margin: '16px 0 40px',
+
     margin: '16px 0 20px',
   },
 }))
@@ -83,20 +103,20 @@ export interface JoiningPanelComponentProps {
   open: boolean
   handleClose: () => void
   openUrl: (url: string) => void
-  torConnectionInfo: { number: number; text: string }
+  connectionInfo: { number: number; text: ConnectionProcessInfo }
   isOwner: boolean
 }
 
 const JoiningPanelComponent: React.FC<JoiningPanelComponentProps> = ({
   open,
   handleClose,
   openUrl,
-  torConnectionInfo,
+  connectionInfo,
   isOwner,
 }) => {
   return (
     <Modal open={open} handleClose={handleClose} isCloseDisabled={true} withoutHeader>
-      <StyledGrid container justifyContent='center' className={classes.root} width={torConnectionInfo.number * 3}>
+      <StyledGrid container justifyContent='center' className={classes.root} width={connectionInfo.number * 3}>
         <Grid
           container
           alignItems='center'
@@ -112,8 +132,14 @@ const JoiningPanelComponent: React.FC<JoiningPanelComponentProps> = ({
           <div className={classes.progressBarWrapper}>
             <Grid container justifyContent='flex-start' alignItems='center' className={classes.progressBar}>
               <div className={classes.progress}></div>
+
+              <div
+                className={classNames({
+                  [classes.animatedProgress]: connectionInfo.text === ConnectionProcessInfo.CONNECTING_TO_COMMUNITY,
+                })}
+              ></div>
             </Grid>
-            <Typography variant='body2'>{torConnectionInfo.text}</Typography>
+            <Typography variant='body2'>{connectionInfo.text}</Typography>
           </div>
 
           <Typography variant='body2' className={classes.text}>

packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { withTheme } from '../../storybook/decorators'
 import JoiningPanelComponent, { JoiningPanelComponentProps } from './JoiningPanelComponent'
 import StartingPanelComponent, { StartingPanelComponentProps } from './StartingPanelComponent'
+import { ConnectionProcessInfo } from '@quiet/types'
 
 const JoiningPanelTemplate: ComponentStory<typeof JoiningPanelComponent> = args => {
   return <JoiningPanelComponent {...args} />
@@ -18,7 +19,7 @@ const JoiningPanelArgs: JoiningPanelComponentProps = {
   open: true,
   handleClose: function (): void {},
   openUrl: () => console.log('OpenURL'),
-  torConnectionInfo: { number: 10, text: 'Fetching' },
+  connectionInfo: { number: 10, text: ConnectionProcessInfo.BACKEND_MODULES },
   isOwner: false,
 }
 const StartingPanelArgs: StartingPanelComponentProps = {

packages/desktop/src/renderer/components/LoadingPanel/LoadingPanel.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useModal } from '../../containers/hooks'
 import { ModalName } from '../../sagas/modals/modals.types'
 import { socketSelectors } from '../../sagas/socket/socket.selectors'
-import { communities, publicChannels, users, identity, connection, network, errors } from '@quiet/state-manager'
+import { communities, publicChannels, users, connection, network, errors } from '@quiet/state-manager'
 import { modalsActions } from '../../sagas/modals/modals.slice'
 import { shell } from 'electron'
 import JoiningPanelComponent from './JoiningPanelComponent'
@@ -16,38 +16,23 @@ const LoadingPanel = () => {
   const loadingPanelModal = useModal(ModalName.loadingPanel)
 
   const isConnected = useSelector(socketSelectors.isConnected)
-
   const currentCommunity = useSelector(communities.selectors.currentCommunity)
   const isChannelReplicated = Boolean(useSelector(publicChannels.selectors.publicChannels)?.length > 0)
-
-  const currentChannelDisplayableMessages = useSelector(publicChannels.selectors.currentChannelMessagesMergedBySender)
-
   const community = useSelector(communities.selectors.currentCommunity)
   const owner = Boolean(community?.CA)
   const usersData = Object.keys(useSelector(users.selectors.certificates))
   const isOnlyOneUser = usersData.length === 1
+  const connectionProcessSelector = useSelector(connection.selectors.connectionProcess)
+  const isJoiningCompletedSelector = useSelector(connection.selectors.isJoiningCompleted)
 
-  const torBootstrapProcessSelector = useSelector(connection.selectors.torBootstrapProcess)
-  const torConnectionProcessSelector = useSelector(connection.selectors.torConnectionProcess)
-
-  const communityId = useSelector(communities.selectors.currentCommunityId)
-  const initializedCommunities = useSelector(network.selectors.initializedCommunities)
-  const isCommunityInitialized = Boolean(initializedCommunities[communityId])
   const error = useSelector(errors.selectors.registrarErrors)
   const registrationError = error?.code === ErrorCodes.FORBIDDEN
 
   useEffect(() => {
-    const areMessagesLoaded = Object.values(currentChannelDisplayableMessages).length > 0
-    console.log('HUNTING for haisenbug:')
-    console.log('isConnected', isConnected)
-    console.log('communityId', communityId)
-    console.log('isCommunityInitialized', isCommunityInitialized)
-    console.log('areMessagesLoaded?', areMessagesLoaded)
-    console.log('registrationError', registrationError)
-    if ((isConnected && isCommunityInitialized && areMessagesLoaded) || registrationError) {
+    if (isJoiningCompletedSelector || registrationError) {
       loadingPanelModal.handleClose()
     }
-  }, [isConnected, torBootstrapProcessSelector, isCommunityInitialized, currentChannelDisplayableMessages, error])
+  }, [isJoiningCompletedSelector, error])
 
   useEffect(() => {
     if (isConnected) {
@@ -77,7 +62,7 @@ const LoadingPanel = () => {
       <JoiningPanelComponent
         {...loadingPanelModal}
         openUrl={openUrl}
-        torConnectionInfo={torConnectionProcessSelector}
+        connectionInfo={connectionProcessSelector}
         isOwner={owner}
       />
     )

packages/mobile/src/components/ChannelList/ChannelList.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import { renderComponent } from '../../utils/functions/renderComponent/renderComponent'
 import { ChannelList } from './ChannelList.component'
 

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

@@ -5,6 +5,7 @@ import { Typography } from '../Typography/Typography.component'
 import { ConnectionProcessComponentProps } from './ConnectionProcess.types'
 import JoinCommunityImg from '../../../assets/icons/join-community.png'
 import { Site } from '@quiet/common'
+import { ConnectionProcessInfo } from '@quiet/types'
 
 const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ connectionProcess, openUrl }) => {
   const animationValue = useRef(new Animated.Value(0)).current
@@ -25,6 +26,28 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
     outputRange: ['0deg', '360deg'],
   })
 
+  const processAnimation = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    if (connectionProcess.text === ConnectionProcessInfo.CONNECTING_TO_COMMUNITY) {
+      Animated.loop(
+        Animated.timing(processAnimation, {
+          toValue: 1,
+          duration: 6000,
+          easing: Easing.linear,
+          useNativeDriver: false,
+        })
+      ).start()
+    } else {
+      processAnimation.stopAnimation()
+    }
+  }, [processAnimation, connectionProcess])
+
+  const processAnimationWidth = processAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [150, 300],
+  })
+
   return (
     <View style={{ flex: 1, backgroundColor: defaultPalette.background.white }} testID={'connection-process-component'}>
       <View
@@ -51,10 +74,39 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
           Joining now!
         </Typography>
 
-        <View style={{ width: 300, height: 4, backgroundColor: '#F0F0F0', borderRadius: 4 }}>
+        <View
+          style={{
+            width: 300,
+            height: 4,
+            backgroundColor: '#F0F0F0',
+            borderRadius: 4,
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
           <View
-            style={{ backgroundColor: '#67BFD3', height: 4, width: connectionProcess.number * 3, borderRadius: 4 }}
+            style={{
+              backgroundColor: '#2196f3',
+              height: 4,
+              width: connectionProcess.number * 3,
+              borderRadius: 4,
+              position: 'relative',
+              zIndex: 3,
+            }}
           ></View>
+
+          {connectionProcess.text === ConnectionProcessInfo.CONNECTING_TO_COMMUNITY && (
+            <Animated.View
+              style={{
+                backgroundColor: '#67BFD3',
+                height: 4,
+                width: processAnimationWidth,
+                borderRadius: 4,
+                position: 'absolute',
+                zIndex: 2,
+              }}
+            />
+          )}
         </View>
         <Typography
           testID='connection-process-text'

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.stories.tsx

@@ -6,8 +6,8 @@ import ConnectionProcessComponent from './ConnectionProcess.component'
 storiesOf('ConnectionProcess', module).add('Default', () => (
   <ConnectionProcessComponent
     connectionProcess={{
-      number: 40,
-      text: ConnectionProcessInfo.SPAWNING_HIDDEN_SERVICE,
+      number: 50,
+      text: ConnectionProcessInfo.CONNECTING_TO_COMMUNITY,
     }}
     openUrl={() => console.log('open')}
   />