Merge lp:~mikemc/ubuntuone-credentials/faster-spinner into lp:ubuntuone-credentials

[Mike McCracken]

- Provide faster visual feedback of activity after clicking 'continue'

- Provide faster visual feedback of activity after clicking 'continue'

Use a timer to delay calling slow login/register functions until after the runloop shows the activity indicator.

TO TEST ON SAUCY desktop:
sudo apt-get build-dep ubuntuone-credentials
branch this , cd into it
mkdir build
cmake -DLIB_SUFFIX=/i386-linux-gnu -DCMAKE_INSTALL_PREFIX=/usr ..
sudo make install

run system-settings.
- click on "accounts" then "Add account", then "Ubuntu One"
try logging in to u1 with a bogus password/username. (make it valid enough to hit the server)
look for the spinner!
it should be in the middle and it should show up right away.

[Roberto Alsina (ralsina)]

review: Approve

[Diego Sarmentero (diegosarmentero)]

You shouldn't do: width: parent.width, height: parent.height. In that case you should do: anchors.fill: parent, it's faster (for the loadingOverlay rectangle).

review: Needs Fixing

[lp:~mikemc/ubuntuone-credentials/faster-spinner]

58. By Mike McCracken on 2013-09-04

use parent.visible as per suggestion of gatox.

[Mike McCracken (mikemc)]

My responses pasted from IRC yesterday :

changing the width/height to anchors.fill: parent causes the overlay to only fill the initial bounds of the
       UI. Once I swap in extra UI, the overlay's size isn't updated and it's
       too small.

about the suggestion to use onRunningChanged instead:

using onRunningChanged is problematic because the loadingoverlay can't
       see the function we want to call - it's in a different file that gets
       loaded in as a sibling of the loading overlay element

[lp:~mikemc/ubuntuone-credentials/faster-spinner]

59. By Mike McCracken on 2013-09-06

remove unnecessary centerIn and add comment to make use of timer obvious

[Mike McCracken (mikemc)]

With the current code, using anchors.fill:parent instead of setting width and height directly doesn't work.

I'd like to land this branch as it is now and defer layout changes to the next branch, which will rework the layout and sizing code quite a bit, and does use anchors.fill:parent, which works with the other changes.

Re: Diego's suggestion from yesterday to use the onRunningChanged signal handler of the loading overlay to call submitFormFromTimer instead of using a timer: (as in lp:~diegosarmentero/+junk/uoa-spinner )
I'd rather stick with the timer, where I can have all the relevant code in the same place. I think moving the actual call to a separate file makes it harder to follow for maintainers, and I don't think anyone would naturally expect that just setting loadingOverlay.visible = true would also call the next function.

[Diego Sarmentero (diegosarmentero)]

+1 (I don't want to block, and you told me that this issues are going to be fixed in the next branch)

review: Approve

=== modified file 'online-accounts-provider/Main.qml'
--- online-accounts-provider/Main.qml	2013-08-21 20:54:55 +0000
+++ online-accounts-provider/Main.qml	2013-09-06 16:03:59 +0000
@@ -47,4 +47,20 @@
             onFinished: root.finished()
         }
     }
+
+    Rectangle {
+        id: loadingOverlay
+        opacity: 0.7
+        color: "white"
+        visible: false
+        width: parent.width
+        height: parent.height
+
+        ActivityIndicator {
+            id: activity
+            anchors.centerIn: parent
+            running: parent.visible
+        }
+    }
+
 }

=== modified file 'online-accounts-provider/NewAccount.qml'
--- online-accounts-provider/NewAccount.qml	2013-09-03 22:14:05 +0000
+++ online-accounts-provider/NewAccount.qml	2013-09-06 16:03:59 +0000
@@ -124,22 +124,6 @@
         anchors.margins: parent.anchors.margins
     }
 
-    Rectangle {
-        id: loadingOverlay
-        opacity: 0.6
-        color: "white"
-        visible: false
-        width: main.width
-        height: main.height
-        //TODO: anchors.centerIn: main.parent
-
-        ActivityIndicator {
-            id: activity
-          //TODO:  anchors.centerIn: parent
-            running: true
-        }
-    }
-
     // -------------------------------------------------
 
     UbuntuOneCredentialsService {
@@ -196,12 +180,28 @@
         }
     }
 
+    /* processForm uses a timer to delay calling u1credservice, which can
+       take a while, to ensure that the loadingOverlay is shown
+       immediately.
+       */
     function processForm() {
+        loadingOverlay.visible = true;
+        formSubmitTimer.running = true;
+    }
+
+    Timer {
+        id: formSubmitTimer;
+        interval: 0;
+        onTriggered: submitFormFromTimer();
+    }
+    
+    function submitFormFromTimer() {
         validateInput();
         if (!formValid) {
+            loadingOverlay.visible = false;
             return;
         }
-        loadingOverlay.visible = true;
+
         if(state == "login") {
             var password = loginForm.password;
             u1credservice.login(emailTextField.text, password);