Add profile fetching view to storyBook

The profile fetching view is part of the onboarding process. This view should be displayed on existing user onboarding flow, while the profile is being fetched in the backend.
It has 3 states:
1. Fetching in progress
2. Fetching completed
3. Fetching error

storybook/main.qml

@@ -65,6 +65,9 @@ ApplicationWindow {
         ListElement {
             title: "UserListPanel"
         }
+        ListElement {
+             title: "ProfileFetchingView"
+        }
     }
 
     SplitView {

storybook/pages/ProfileFetchingViewPage.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import AppLayouts.Onboarding.views 1.0
+import AppLayouts.Onboarding.stores 1.0
+
+import Storybook 1.0
+
+import utils 1.0
+
+SplitView {
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        ProfileFetchingView {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+
+            startupStore: StartupStore {
+                property QtObject currentStartupState: QtObject {
+                    property string stateType: comboBox.currentText
+                }
+
+                function doPrimaryAction() {
+                    logs.logEvent("StartupStore::doPrimaryAction")
+                }
+
+                function doSecondaryAction() {
+                    logs.logEvent("StartupStore::doSecondaryAction")
+                }
+
+                function doTertiaryAction() {
+                    logs.logEvent("StartupStore::doTertiaryAction")
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
+        }
+    }
+
+    ComboBox {
+        id: comboBox
+        SplitView.preferredWidth: 300
+        SplitView.preferredHeight: 100
+        model: [ Constants.startupState.profileFetching, Constants.startupState.profileFetchingCompleted, Constants.startupState.profileFetchingError, "none" ]
+    }
+}

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

@@ -0,0 +1,82 @@
+import QtQuick 2.14
+
+import utils 1.0
+
+Item {
+    id: root
+    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
+
+        Sprite {
+            id: sprite
+            frameCount: 94
+            frameWidth: 240
+            frameHeight: 240
+            frameRate: 30
+            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/shared/qmldir

@@ -0,0 +1 @@
+ProfileFetchingAnimation 1.0 ProfileFetchingAnimation.qml

ui/app/AppLayouts/Onboarding/views/ProfileFetchingView.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Onboarding.stores 1.0
+import AppLayouts.Onboarding.shared 1.0
+
+import utils 1.0
+
+Item {
+    id: root
+
+    property StartupStore startupStore
+
+    states: [
+        State {
+            name: Constants.startupState.profileFetching
+            when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetching
+            PropertyChanges {
+                target: description;
+                text: Constants.onboarding.profileFetching.descriptionForFetchingStarted
+                nextText: Constants.onboarding.profileFetching.descriptionForFetchingInProgress
+            }
+        },
+        State {
+            name: Constants.startupState.profileFetchingCompleted
+            when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingCompleted
+            PropertyChanges { target: title; text: Constants.onboarding.profileFetching.titleForSuccess }
+        },
+        State {
+            name: Constants.startupState.profileFetchingError
+            when: root.startupStore.currentStartupState.stateType === Constants.startupState.profileFetchingError
+            PropertyChanges { target: title; text: Constants.onboarding.profileFetching.titleForError }
+            PropertyChanges { target: description; text: Constants.onboarding.profileFetching.descriptionForError }
+            PropertyChanges { target: button; visible: true}
+            PropertyChanges { target: link; visible: true }
+        }
+    ]
+
+    ColumnLayout {
+        anchors.centerIn: parent
+        height: Constants.keycard.general.onboardingHeight
+        spacing: Style.current.bigPadding
+
+        ProfileFetchingAnimation {
+            id: loadingAnimation
+            Layout.alignment: Qt.AlignHCenter
+            state: root.state
+        }
+
+        StatusBaseText {
+            id: title
+            visible: text.length > 0
+            Layout.alignment: Qt.AlignHCenter
+            font.weight: Font.Bold
+            font.pixelSize: Constants.onboarding.profileFetching.titleFontSize
+        }
+
+        StatusBaseText {
+            id: description
+            property string nextText: ""
+            Layout.alignment: Qt.AlignHCenter
+            horizontalAlignment: Text.AlignHCenter
+            visible: text.length > 0
+            wrapMode: Text.WordWrap
+            color: Style.current.secondaryText
+            font.pixelSize: Constants.onboarding.profileFetching.descriptionFontSize
+            Timer {
+                id: nextTextTimer
+                interval: 2500
+                running: description.nextText !== ""
+                onTriggered: { description.text = description.nextText }
+            }
+        }
+
+        StatusButton {
+            id: button
+            visible: false
+            Layout.alignment: Qt.AlignHCenter
+            focus: true
+            text: Constants.onboarding.profileFetching.tryAgainText
+            onClicked: {
+                root.startupStore.doPrimaryAction()
+            }
+        }
+
+        StatusBaseText {
+            id: link
+            visible: false
+            Layout.alignment: Qt.AlignHCenter
+            font.pixelSize: Constants.keycard.general.buttonFontSize
+            text: Constants.onboarding.profileFetching.createNewProfileText
+            color: Theme.palette.primaryColor1
+            font.underline: linkMouseArea.containsMouse
+            MouseArea {
+                id: linkMouseArea
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                hoverEnabled: true
+                onClicked: {
+                    root.startupStore.doSecondaryAction()
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
+}

ui/app/AppLayouts/Onboarding/views/qmldir

@@ -1 +1,2 @@
 LoginView 1.0 LoginView.qml
+ProfileFetchingView 1.0 ProfileFetchingView.qml

ui/imports/utils/Constants.qml

@@ -76,6 +76,9 @@ QtObject {
         readonly property string loginKeycardMaxPairingSlotsReached: "LoginKeycardMaxPairingSlotsReached"
         readonly property string loginKeycardEmpty: "LoginKeycardEmpty"
         readonly property string loginNotKeycard: "LoginNotKeycard"
+        readonly property string profileFetching: "ProfileFetching"
+        readonly property string profileFetchingCompleted: "ProfileFetchingCompleted"
+        readonly property string profileFetchingError: "ProfileFetchingError"
     }
 
     readonly property QtObject predefinedKeycardData: QtObject {
@@ -297,6 +300,20 @@ QtObject {
         readonly property int userImageWidth: 40
         readonly property int userImageHeight: 40
         readonly property int titleFontSize: 17
+        readonly property QtObject profileFetching: QtObject {
+            readonly property int    titleFontSize: 22
+            readonly property string titleForSuccess: qsTr("Profile successfully fetched")
+            readonly property string titleForError: qsTr("Unable to fetch your profile")
+            readonly property int    descriptionFontSize: 15
+            readonly property string descriptionForError: qsTr("Sorry, we were unable to fetch your Status profile. If you are using Status on \nanother device, make sure Status is running and it is online and try again. ")
+            readonly property string descriptionForFetchingStarted: qsTr("Securely transferring data...")
+            readonly property string descriptionForFetchingInProgress: qsTr("This might take a while...")
+            readonly property string imgInProgress: "onboarding/profile_fetching_in_progress"
+            readonly property string imgError: "onboarding/profile_fetching_error"
+            readonly property string imgCompleted: "onboarding/profile_fetching_completed"
+            readonly property string tryAgainText: qsTr("Try again")
+            readonly property string createNewProfileText: qsTr("Create new Status profile")
+        }
     }
 
     readonly property QtObject onlineStatus: QtObject{