Show key import progression

src/qml/Pages/EditAccount/Encryption.qml

@@ -1,81 +1,19 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
 import "../../Base"
-import "../../utils.js" as Utils
 
-HColumnLayout {
-    function importKeys(file, passphrase) {
-        importButton.loading = true
+HLoader {
+    id: loader
+    source: accountInfo.total_keys_to_import ?
+            "ImportingKeys.qml" : "ImportExportKeys.qml"
 
-        let path = file.toString().replace(/^file:\/\//, "")
+    onSourceChanged: animation.running = true
 
-        py.callClientCoro(
-            editAccount.userId, "import_keys", [path, passphrase], () => {
-                print("import done")
-                importButton.loading = false
-            }
-        )
-    }
-
-    HLabel {
-        wrapMode: Text.Wrap
-        text: qsTr(
-            "The decryption keys for messages you received in encrypted " +
-            "rooms can be exported to a passphrase-protected file.%1" +
-            "You will then be able to import this file in another " +
-            "Matrix client."
-        ).arg(pageLoader.isWide ? "\n" :"\n\n")
-
-        Layout.fillWidth: true
-        Layout.margins: currentSpacing
-    }
-
-    HRowLayout {
-        HButton {
-            id: exportButton
-            icon.name: "export-keys"
-            text: qsTr("Export")
-            enabled: false
-
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignBottom
-        }
-
-        HButton {
-            id: importButton
-            icon.name: "import-keys"
-            text: qsTr("Import")
-
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignBottom
-
-            HFileDialogOpener {
-                id: fileDialog
-                dialog.title: qsTr("Select a decryption key file to import")
-                onFileChanged: {
-                    importPasswordPopup.file = file
-                    importPasswordPopup.open()
-                }
-            }
-        }
-    }
-
-    HPasswordPopup {
-        property url file: ""
-
-        function verifyPassword(pass, callback) {
-            return py.callCoro(
-                "check_exported_keys_passphrase",
-                [file.toString().replace(/^file:\/\//, ""), pass],
-                callback
-            )
-        }
-
-        id: importPasswordPopup
-        label.text: qsTr(
-            "Please enter the passphrase that was used to protect this file:"
-        )
-        onAcceptedPasswordChanged: importKeys(file, acceptedPassword)
+    HNumberAnimation {
+        id: animation
+        target: loader.item
+        property: "scale"
+        from: 0
+        to: 1
+        overshoot: 3
     }
 }

src/qml/Pages/EditAccount/ImportExportKeys.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+import "../../utils.js" as Utils
+
+HColumnLayout {
+    function importKeys(file, passphrase) {
+        importButton.loading = true
+
+        let path = file.toString().replace(/^file:\/\//, "")
+
+        py.callClientCoro(
+            editAccount.userId, "import_keys", [path, passphrase], () => {
+                if (importButton) importButton.loading = false
+            }
+        )
+    }
+
+    HLabel {
+        wrapMode: Text.Wrap
+        text: qsTr(
+            "The decryption keys for messages you received in encrypted " +
+            "rooms can be exported to a passphrase-protected file.%1" +
+            "You will then be able to import this file in another " +
+            "Matrix client."
+        ).arg(pageLoader.isWide ? "\n" :"\n\n")
+
+        Layout.fillWidth: true
+        Layout.margins: currentSpacing
+    }
+
+    HRowLayout {
+        HButton {
+            id: exportButton
+            icon.name: "export-keys"
+            text: qsTr("Export")
+            enabled: false
+
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignBottom
+        }
+
+        HButton {
+            id: importButton
+            icon.name: "import-keys"
+            text: qsTr("Import")
+
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignBottom
+
+            HFileDialogOpener {
+                id: fileDialog
+                dialog.title: qsTr("Select a decryption key file to import")
+                onFileChanged: {
+                    importPasswordPopup.file = file
+                    importPasswordPopup.open()
+                }
+            }
+        }
+    }
+
+    HPasswordPopup {
+        property url file: ""
+
+        function verifyPassword(pass, callback) {
+            return py.callCoro(
+                "check_exported_keys_passphrase",
+                [file.toString().replace(/^file:\/\//, ""), pass],
+                callback
+            )
+        }
+
+        id: importPasswordPopup
+        label.text: qsTr(
+            "Please enter the passphrase that was used to protect this file:"
+        )
+        onAcceptedPasswordChanged: importKeys(file, acceptedPassword)
+    }
+}

src/qml/Pages/EditAccount/ImportingKeys.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+import "../../utils.js" as Utils
+
+HColumnLayout {
+    HRowLayout {
+        HLabel {
+            text: qsTr("Importing decryption keys...")
+            elide: Text.ElideRight
+
+            Layout.fillWidth: true
+            Layout.margins: currentSpacing
+        }
+
+        HLabel {
+            text: qsTr("%1/%2")
+                  .arg(Math.ceil(progressBar.value)).arg(progressBar.to)
+
+            Layout.margins: currentSpacing
+            Layout.leftMargin: 0
+        }
+    }
+
+    ProgressBar {
+        id: progressBar
+        from: 0
+        value: accountInfo.importing_key
+        to: accountInfo.total_keys_to_import
+
+        Behavior on value { HNumberAnimation { factor: 5 } }
+
+        Layout.fillWidth: true
+    }
+}