Checkbox needs 'unknown' state

[Lars Karlitski]

The Checkbox component always animates its state transitions. Sometimes, the "checked" property is set shortly after initialization, which shows the animation when creating a page. For example, this happens when using the GSettings object, which fills in its properties in its componentCompleted:

    GSettings {
        id: settings
        schema.id: "com.ubuntu.touch.system"
    }

    CheckBox {
        checked: settings.autoBrightness
    }

It would be nice if there was a property "animate" which could be used to suppress animations while loading a page.

[Matthew Paul Thomas (mpt)]

I'm not sure turning off animations is an appropriate solution to the problem. Even if you do that, occasionally the device will be slow enough that you still see the control in the wrong state before it gains the correct state. That will make the whole device feel less trustworthy.

I suggest that the toolkit instead just not show a checkbox or switch at all until its state is known. It's better for it to be a little late and correct, than early and shifty.

What would be *really* cool would be if the toolkit automatically implemented, for every checkbox and switch, the behavior I defined for the call forwarding and call waiting switches: if the state takes a long time, show a spinner instead until the state becomes known. <https://wiki.ubuntu.com/PhoneApp#Call_waiting>

To be precise, something like this:
 * initially don't show the control at all
 * if state still isn't known after 500 ms, show the label but not yet the checkbox/switch
 * if state still isn't known after another 500 ms, show a spinner where the checkbox/switch will end up.

[Matthew Paul Thomas (mpt)]

This isn't just for checkboxes and switches, either. I see the same problem with sliders, starting out at zero and then shuffling to their actual value.

[Tim Peeters (tpeeters)]

There was an issue with the Switch animating when its initial checked value was not false. I got that fixed in this MR: https://code.launchpad.net/~tpeeters/ubuntu-ui-toolkit/littleSwitch/+merge/240985 (if the checked value changes afterwards, you still see an animation). We may follow a similar approach with the CheckBox.

[Tim Peeters (tpeeters)]

There is no animation for the initial value of the CheckBox, only if it is updated later (after initialization of the component itself).

A solution for the give code example may be to put the CheckBox in a loader that is only loaded when the GSettings are done initializing?

[Lars Karlitski (larsu)]

Thanks for the fix.

> A solution for the give code example may be to put the CheckBox in a loader that is only loaded when the GSettings are done initializing?

Ya, that's possible and what we're using in some places. However, that's a unwieldy and leads to less readable qml.

I like Matthew's idea best: instead of having an "animate" property, add an "unknown" state.

[Tim Peeters (tpeeters)]

Would setting Checkbox.enabled: false until the state is known work?

If not, do we have visual designs (and perhaps UX specs) for the 'unknown' state of the Checkbox?

[Matthew Paul Thomas (mpt)]

Setting .enabled: false is a worthy suggestion, but I think that would make the problem slightly worse, not better. Animating from disabled×unchecked to enabled×checked would be even more noticeable — and therefore even more distracting — than from enabled×unchecked to enabled×checked.

Having an “unknown” state would work (the micro equivalent to a “skeleton screen” for a screen as a whole), but it seems a bit excessive. It would be a 1/3 increase in visual design work for checkboxes and radio buttons, and a 50% increase for switches, for something that is not only seldom seen, but also, when it is seen, is seen only for a fraction of a second.

So, I still think a better approach would be simply not to show the control at all until its value is known.

[Matthew Paul Thomas (mpt)]

For the reasons given above, I have not included an “animated” property or an “unknown” state in the toolkit specification for checkboxes. <http://goo.gl/YGD1yb> (Canonical-only link, sorry) As with any control, it’s generally better not to show a checkbox until you know what its value is supposed to be.

[Launchpad Janitor (janitor)]

[Expired for ubuntu-ui-toolkit (Ubuntu) because there has been no activity for 60 days.]