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/molecules/room-history-visibility/RoomHistoryVisibility.jsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomHistoryVisibility.scss';
 
-import initMatrix from '../../../client/initMatrix';
 
 import Text from '../../atoms/text/Text';
 import RadioButton from '../../atoms/button/RadioButton';
 import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const visibility = {
   WORLD_READABLE: 'world_readable',
@@ -33,38 +33,33 @@ const items = [{
   type: visibility.JOINED,
 }];
 
-function setHistoryVisibility(roomId, type) {
-  const mx = initMatrix.matrixClient;
-
-  return mx.sendStateEvent(
-    roomId, 'm.room.history_visibility',
-    {
-      history_visibility: type,
-    },
-  );
-}
 
 function useVisibility(roomId) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
 
   const [activeType, setActiveType] = useState(room.getHistoryVisibility());
   useEffect(() => {
     setActiveType(room.getHistoryVisibility());
-  }, [roomId]);
+  }, [room]);
 
   const setVisibility = useCallback((item) => {
     if (item.type === activeType.type) return;
     setActiveType(item.type);
-    setHistoryVisibility(roomId, item.type);
-  }, [activeType, roomId]);
+    mx.sendStateEvent(
+      roomId, 'm.room.history_visibility',
+      {
+        history_visibility: item.type,
+      },
+    );
+  }, [mx, activeType, roomId]);
 
   return [activeType, setVisibility];
 }
 
 function RoomHistoryVisibility({ roomId }) {
   const [activeType, setVisibility] = useVisibility(roomId);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const userId = mx.getUserId();
   const room = mx.getRoom(roomId);
   const { currentState } = room;