How to add an activity-indicator on a page level?

Question

I would like to add an activity-indicator widget in my login page but I would like it to cover the whole screen, so I can prevent double click on the Login button.

Any idea, thanks!

Answer 1

If you wrap everything in a GridLayout, add a StackLayout as the last item in the row you want to cover. The StackLayout by default will cover the whole screen. Then you can show/hide via data. For example:

<GridLayout>
    <StackLayout>
        // All your page content goes here! 
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
        <ActivityIndicator busy="true" />
    </GridLayout>
</GridLayout>

I have a "dimmer" StackLayout that I animate to be semi transparent black, then the Activity Indicator sits on top.