How to implement a visual busy/working indicator in Exrin?

156 views Asked by At

Context

I am discovering step by step Exrin infrastructure. I explored that there are many ready to use infra element to implement command execution in background. Among those I see IsBusyDelay, VisualState.IsBusy, Timeout message, etc. I also know that Exrin does not depend on Xamarin.Forms, so I suppose, no real visual implementation should be provided by Exrin, that very last step remains on me. (which is cool, let me decide the UI experience)

In my ViewModel I set IsBusyDelay = 1000;. The background task is started by Execution.ViewModelExecute(... my task here ..., currently 5000msec delay )

Question

I suppose now I have to implement somewhere a handler(s) or override(s) which will be called automatically, and implement some visual UX to show and hide the a busy/inprogress UX feedback. I just do not know where and how...

1

There are 1 answers

3
Adam On BEST ANSWER

This is something you would implement yourself in the view. For example, if you wanted something that covered the whole screen, with a loading indicator, you would add this to your UI.

<Grid HorizontalOptions="FillAndExpand"
      IsVisible="{Binding VisualState.IsBusy}"
      BackgroundColor="#E6272C30"
      VerticalOptions="FillAndExpand">
    <Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand" 
          Height="200">
        <ActivityIndicator Grid.Row="0"                       
                        IsRunning="{Binding VisualState.IsBusy}"
                        IsVisible="{Binding VisualState.IsBusy}">
            <ActivityIndicator.Scale>
              <OnPlatform x:TypeArguments="x:Double" Android="1" iOS="1.3" />
            </ActivityIndicator.Scale>
        </ActivityIndicator>
    </Grid>
</Grid>

You would add this at the bottom of the page, inside your existing Grid.

Then when IsBusy is trigger, it shows this as an overlay, with the activity indicator.

Of course that is only one way to do it. You could just have an activityindicator next to, or inside a button that was just clicked, or anything similar. It all depends on your UI design.