handle error in loading screen (#1823)

* handle client boot error in loading screen

* use sync state hook in client root

* add loading screen options

* removed extra condition in loading finish

* add sync connection status bar

src/app/hooks/useSyncState.ts

@@ -2,13 +2,13 @@ import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk'
 import { useEffect } from 'react';
 
 export const useSyncState = (
-  mx: MatrixClient,
+  mx: MatrixClient | undefined,
   onChange: ClientEventHandlerMap[ClientEvent.Sync]
 ): void => {
   useEffect(() => {
-    mx.on(ClientEvent.Sync, onChange);
+    mx?.on(ClientEvent.Sync, onChange);
     return () => {
-      mx.removeListener(ClientEvent.Sync, onChange);
+      mx?.removeListener(ClientEvent.Sync, onChange);
     };
   }, [mx, onChange]);
 };