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/pages/client/SyncStatus.tsx

@@ -0,0 +1,87 @@
+import { MatrixClient, SyncState } from 'matrix-js-sdk';
+import React, { useCallback, useState } from 'react';
+import { Box, config, Line, Text } from 'folds';
+import { useSyncState } from '../../hooks/useSyncState';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+
+type StateData = {
+  current: SyncState | null;
+  previous: SyncState | null | undefined;
+};
+
+type SyncStatusProps = {
+  mx: MatrixClient;
+};
+export function SyncStatus({ mx }: SyncStatusProps) {
+  const [stateData, setStateData] = useState<StateData>({
+    current: null,
+    previous: undefined,
+  });
+
+  useSyncState(
+    mx,
+    useCallback((current, previous) => {
+      setStateData((s) => {
+        if (s.current === current && s.previous === previous) {
+          return s;
+        }
+        return { current, previous };
+      });
+    }, [])
+  );
+
+  if (
+    (stateData.current === SyncState.Prepared ||
+      stateData.current === SyncState.Syncing ||
+      stateData.current === SyncState.Catchup) &&
+    stateData.previous !== SyncState.Syncing
+  ) {
+    return (
+      <Box direction="Column" shrink="No">
+        <Box
+          className={ContainerColor({ variant: 'Success' })}
+          style={{ padding: `${config.space.S100} 0` }}
+          alignItems="Center"
+          justifyContent="Center"
+        >
+          <Text size="L400">Connecting...</Text>
+        </Box>
+        <Line variant="Success" size="300" />
+      </Box>
+    );
+  }
+
+  if (stateData.current === SyncState.Reconnecting) {
+    return (
+      <Box direction="Column" shrink="No">
+        <Box
+          className={ContainerColor({ variant: 'Warning' })}
+          style={{ padding: `${config.space.S100} 0` }}
+          alignItems="Center"
+          justifyContent="Center"
+        >
+          <Text size="L400">Connection Lost! Reconnecting...</Text>
+        </Box>
+        <Line variant="Warning" size="300" />
+      </Box>
+    );
+  }
+
+  if (stateData.current === SyncState.Error) {
+    return (
+      <Box direction="Column" shrink="No">
+        <Box
+          className={ContainerColor({ variant: 'Critical' })}
+          style={{ padding: `${config.space.S100} 0` }}
+          alignItems="Center"
+          justifyContent="Center"
+        >
+          <Text size="L400">Connection Lost!</Text>
+        </Box>
+        <Line variant="Critical" size="300" />
+      </Box>
+    );
+  }
+
+  return null;
+}