fix(storybook): profile fetching updated

Profile fetching page, which is part of onboarding flow, is updated so it matches
the latest figma changes now.

storybook/pages/ProfileFetchingModelEditor.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import utils 1.0
+
+Item {
+    id: root
+
+    property alias model: listView.model
+
+    signal stateChanged(string state)
+
+    ComboBox {
+        id: comboBox
+
+        width: parent.width
+
+        model: [Constants.startupState.profileFetching,
+            Constants.startupState.profileFetchingSuccess,
+            Constants.startupState.profileFetchingTimeout]
+
+        onCurrentIndexChanged: {
+            root.stateChanged(model[currentIndex])
+        }
+    }
+
+    ListView {
+        id: listView
+
+        anchors.top: comboBox.bottom
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: 32
+
+        spacing: 25
+        ScrollBar.vertical: ScrollBar { x: root.width }
+
+        delegate: ColumnLayout {
+            id: rootDelegate
+
+            width: ListView.view.width
+
+            Label {
+                Layout.fillWidth: true
+                text: model.entity
+                font.weight: Font.Bold
+            }
+
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "loadedMessages:\t"
+                }
+
+                SpinBox {
+                    editable: true
+                    height: 30
+                    from: 0; to: model.totalMessages
+                    value:  model.loadedMessages
+                    onValueChanged: model.loadedMessages = value
+                }
+            }
+
+            Row {
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "totalMessages:\t"
+                }
+
+                SpinBox {
+                    editable: true
+                    height: 30
+                    from: 0; to: 10 * 1000 * 1000
+                    value:  model.totalMessages
+                    onValueChanged: model.totalMessages = value
+                }
+            }
+        }
+    }
+}

storybook/pages/ProfileFetchingViewPage.qml

@@ -20,8 +20,38 @@ SplitView {
             SplitView.fillHeight: true
 
             startupStore: StartupStore {
+                id: startupStore
+
                 property QtObject currentStartupState: QtObject {
-                    property string stateType: comboBox.currentText
+                    property string stateType
+                }
+
+                property ListModel fetchingDataModel: ListModel {
+                    Component.onCompleted: append([
+                        {
+                        entity: Constants.onboarding.profileFetching.entity.profile,
+                        loadedMessages: 0,
+                        totalMessages: 0,
+                        icon: "profile"
+                    },
+                    {
+                        entity: Constants.onboarding.profileFetching.entity.contacts,
+                        loadedMessages: 0,
+                        totalMessages: 0,
+                        icon: "contact-book"
+                    },
+                    {
+                        entity: Constants.onboarding.profileFetching.entity.communities,
+                        loadedMessages: 0,
+                        totalMessages: 0,
+                        icon: "communities"
+                    },
+                    {
+                        entity: Constants.onboarding.profileFetching.entity.settings,
+                        loadedMessages: 0,
+                        totalMessages: 0,
+                        icon: "settings"
+                    }])
                 }
 
                 function doPrimaryAction() {
@@ -48,10 +78,38 @@ SplitView {
         }
     }
 
-    ComboBox {
-        id: comboBox
+    Pane {
+        SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
-        SplitView.preferredHeight: 100
-        model: [ Constants.startupState.profileFetching, Constants.startupState.profileFetchingCompleted, Constants.startupState.profileFetchingError, "none" ]
+
+        ProfileFetchingModelEditor {
+            anchors.fill: parent
+            model: startupStore.fetchingDataModel
+
+            onStateChanged: {
+                if (state === Constants.startupState.profileFetching) {
+                    for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
+                        startupStore.fetchingDataModel.setProperty(i, "totalMessages", 0)
+                        startupStore.fetchingDataModel.setProperty(i, "loadedMessages", 0)
+                    }
+                }
+                else if (state === Constants.startupState.profileFetchingSuccess) {
+                    for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
+                        let n = Math.ceil(Math.random() * 10) + 1
+                        startupStore.fetchingDataModel.setProperty(i, "totalMessages", n)
+                        startupStore.fetchingDataModel.setProperty(i, "loadedMessages", n)
+                    }
+                }
+                else if (state === Constants.startupState.profileFetchingTimeout) {
+                    for(let i = 0; i < startupStore.fetchingDataModel.rowCount(); i++) {
+                        let n = Math.ceil(Math.random() * 5)
+                        startupStore.fetchingDataModel.setProperty(i, "totalMessages", n + 5)
+                        startupStore.fetchingDataModel.setProperty(i, "loadedMessages", n)
+                    }
+                }
+
+                startupStore.currentStartupState.stateType = state
+            }
+        }
     }
 }

ui/app/AppLayouts/Onboarding/shared/ProfileFetchingAnimation.qml

@@ -7,52 +7,11 @@ Item {
     implicitHeight: 240
     implicitWidth: 240
 
-    states: [
-        State {
-            name: Constants.startupState.profileFetching
-            PropertyChanges { target: loadingAnimation; opacity: 1; }
-            PropertyChanges { target: completedImage; opacity: 0 }
-            PropertyChanges { target: errorImage; opacity: 0 }
-
-        },
-        State {
-            name: Constants.startupState.profileFetchingCompleted
-            PropertyChanges { target: loadingAnimation; opacity: 0;}
-            PropertyChanges { target: completedImage; opacity: 1 }
-            PropertyChanges { target: errorImage; opacity: 0 }
-        },
-        State {
-            name: Constants.startupState.profileFetchingError
-            PropertyChanges { target: loadingAnimation; opacity: 0;}
-            PropertyChanges { target: completedImage; opacity: 0 }
-            PropertyChanges { target: errorImage; opacity: 1 }
-        }
-    ]
-
-    transitions: [
-        Transition {
-            from: Constants.startupState.profileFetching
-            to: Constants.startupState.profileFetchingCompleted
-            ParallelAnimation {
-                NumberAnimation { target: completedImage; property: "opacity"; duration: 100 }
-                NumberAnimation { target: loadingAnimation; property: "opacity"; duration: 100 }
-            }
-        },
-        Transition {
-            from: Constants.startupState.profileFetching
-            to: Constants.startupState.profileFetchingError
-            ParallelAnimation {
-                NumberAnimation { target: errorImage; property: "opacity"; duration: 100 }
-                NumberAnimation { target: loadingAnimation; property: "opacity"; duration: 100 }
-            }
-        }
-    ]
 
     SpriteSequence {
         id: loadingAnimation
         anchors.fill: root
-        running: visible
-        visible: opacity > 0
+        running: true
 
         Sprite {
             id: sprite
@@ -63,20 +22,4 @@ Item {
             source: Style.png(Constants.onboarding.profileFetching.imgInProgress)
         }
     }
-
-    Image {
-        id: completedImage
-        anchors.fill: loadingAnimation
-        visible: opacity > 0
-        opacity: 0
-        source: Style.png(Constants.onboarding.profileFetching.imgCompleted)
-    }
-
-    Image {
-        id: errorImage
-        anchors.fill: loadingAnimation
-        visible: opacity > 0
-        opacity: 0
-        source: Style.png(Constants.onboarding.profileFetching.imgError)
-    }
 }

ui/app/AppLayouts/Onboarding/stores/StartupStore.qml

@@ -8,6 +8,8 @@ QtObject {
                                                         : null
     property var selectedLoginAccount: startupModuleInst ? startupModuleInst.selectedLoginAccount
                                                          : null
+    property var fetchingDataModel: startupModuleInst ? startupModuleInst.fetchingDataModel
+                                                         : null
 
     function backAction() {
         root.currentStartupState.backAction()