Show a progress bar while migrating from legacy crypto (#12104)

* Show a progress bar during migration of crypto data

* playwright: add new `pageWithCredentials` fixture

* Add a playwright test for migration progress

* Add documentation for `idbSave`

src/components/structures/MatrixChat.tsx

@@ -2123,6 +2123,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // Suppress `InvalidStoreError`s here, since they have their own error dialog.
                 view = (
                     <LoginSplashView
+                        matrixClient={MatrixClientPeg.safeGet()}
                         onLogoutClick={this.onLogoutClick}
                         syncError={isStoreError ? null : this.state.syncError}
                     />

src/components/structures/auth/LoginSplashView.tsx

@@ -15,13 +15,19 @@ limitations under the License.
 */
 
 import React from "react";
+import { CryptoEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { messageForSyncError } from "../../../utils/ErrorUtils";
 import Spinner from "../../views/elements/Spinner";
+import ProgressBar from "../../views/elements/ProgressBar";
 import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
 import { _t } from "../../../languageHandler";
+import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 
 interface Props {
+    /** The matrix client which is logging in */
+    matrixClient: MatrixClient;
+
     /**
      * A callback function. Will be called if the user clicks the "logout" button on the splash screen.
      *
@@ -35,19 +41,42 @@ interface Props {
     syncError: Error | null;
 }
 
+type MigrationState = {
+    progress: number;
+    totalSteps: number;
+};
+
 /**
  * The view that is displayed after we have logged in, before the first /sync is completed.
  */
 export function LoginSplashView(props: Props): React.JSX.Element {
+    const migrationState = useTypedEventEmitterState(
+        props.matrixClient,
+        CryptoEvent.LegacyCryptoStoreMigrationProgress,
+        (progress?: number, total?: number): MigrationState => ({ progress: progress ?? -1, totalSteps: total ?? -1 }),
+    );
     let errorBox: React.JSX.Element | undefined;
-
     if (props.syncError) {
         errorBox = <div className="mx_LoginSplashView_syncError">{messageForSyncError(props.syncError)}</div>;
     }
+
+    // If we are migrating the crypto data, show a progress bar. Otherwise, show a normal spinner.
+    let spinnerOrProgress;
+    if (migrationState.totalSteps !== -1) {
+        spinnerOrProgress = (
+            <div className="mx_LoginSplashView_migrationProgress">
+                <p>{_t("migrating_crypto")}</p>
+                <ProgressBar value={migrationState.progress} max={migrationState.totalSteps} />
+            </div>
+        );
+    } else {
+        spinnerOrProgress = <Spinner />;
+    }
+
     return (
         <div className="mx_MatrixChat_splash">
             {errorBox}
-            <Spinner />
+            {spinnerOrProgress}
             <div className="mx_LoginSplashView_splashButtons">
                 <AccessibleButton kind="link_inline" onClick={props.onLogoutClick}>
                     {_t("action|logout")}

src/i18n/strings/en_EN.json

@@ -1587,6 +1587,7 @@
     },
     "member_list_back_action_label": "Room members",
     "message_edit_dialog_title": "Message edits",
+    "migrating_crypto": "Hang tight. We are updating Element to make encryption faster and more reliable.",
     "mobile_guide": {
         "toast_accept": "Use app",
         "toast_description": "%(brand)s is experimental on a mobile web browser. For a better experience and the latest features, use our free native app.",