UI best practice for long REST calls

General Questions
1

Hi,

I’m making calls to OpenAI and sometimes the request takes 15-20 seconds.
How would you recommend configuring the Jigx to make it more user friendly during the request?

I’ve tried showing an animated gif when the request is made, which works, however it seems like the onSuccess event of a functionCall fires when the request is made, and not when it successfully returns the response. So now the animation never shows.

Thoughts?

Cheers,
Adam.

2

Hey Adam

You can create a placeholder with animation.
Depending on how the solution is designed, or how the rest call is being used.
Here is an example of how you can get an animated loading screen while waiting for the rest call to complete.

Using a button here to submit. Which will take you to a OpenAIResults Jig

        - type: component.button
          options:
            style: 
            title: Submit
            type: primary
            onPress: 
              type: action.action-list
              options:
                isSequential: true
                actions:
                  - type: action.set-state
                    options:
                      state: =@ctx.solution.state.openaicall
                      value: 0
                  - type: action.go-to
                    options:
                      linkTo: OpenAIResults
                      parameters:
                        ID: =@ctx.components.state.value
                  - type: action.sync-entities
                    options: 
                      provider: DATA_PROVIDER_REST
                      entities:
                        - entity: 123
                          function: ABC
                          functionParameters:
                            parameter1: =@ctx.......
                            parameter2: =@ctx........

#Rest of the Action List and rest call comes here. 
#Remember this is sequential, so it will run through and then change the value from 0 to 1 after.

                  - type: action.set-state
                    options:
                      state: =@ctx.solution.state.openaicall
                      value: 1

This basically ensures that the state is set to 0, while the whole sequence is being called. Then at the end it changes to 1.

Now in the OpenAIResults jig, we have the below. This will show the placeholder animation while the state is 0. This means during the sequential call above it will show the placeholder, till it is completed.


title: OpenAI Results
description: OpenAI Results
type: jig.default

placeholders:
  - when: =@ctx.solution.state.openaicall = 0 ? true :false
    title: Please wait while OpenAI thinks
    icon: loading-data

The above should work and is an enhancement to the following article

3

Thanks.

Using action.sync-entities was the key

2 Likes