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/client/initMatrix.ts

@@ -0,0 +1,70 @@
+import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from 'matrix-js-sdk';
+import Olm from '@matrix-org/olm';
+import { logger } from 'matrix-js-sdk/lib/logger';
+
+import { cryptoCallbacks } from './state/secretStorageKeys';
+
+global.Olm = Olm;
+
+if (import.meta.env.PROD) {
+  logger.disableAll();
+}
+
+type Session = {
+  baseUrl: string;
+  accessToken: string;
+  userId: string;
+  deviceId: string;
+};
+
+export const initClient = async (session: Session): Promise<MatrixClient> => {
+  const indexedDBStore = new IndexedDBStore({
+    indexedDB: global.indexedDB,
+    localStorage: global.localStorage,
+    dbName: 'web-sync-store',
+  });
+  await indexedDBStore.startup();
+
+  const mx = createClient({
+    baseUrl: session.baseUrl,
+    accessToken: session.accessToken,
+    userId: session.userId,
+    store: indexedDBStore,
+    cryptoStore: new IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
+    deviceId: session.deviceId,
+    timelineSupport: true,
+    cryptoCallbacks: cryptoCallbacks as any,
+    verificationMethods: ['m.sas.v1'],
+  });
+
+  await mx.initCrypto();
+
+  mx.setGlobalErrorOnUnknownDevices(false);
+  mx.setMaxListeners(50);
+
+  return mx;
+};
+
+export const startClient = async (mx: MatrixClient) => {
+  await mx.startClient({
+    lazyLoadMembers: true,
+  });
+};
+
+export const clearCacheAndReload = async (mx: MatrixClient) => {
+  mx.stopClient();
+  await mx.store.deleteAllData();
+  window.location.reload();
+};
+
+export const logoutClient = async (mx: MatrixClient) => {
+  mx.stopClient();
+  try {
+    await mx.logout();
+  } catch {
+    // ignore if failed to logout
+  }
+  await mx.clearStores();
+  window.localStorage.clear();
+  window.location.reload();
+};