Temporarily disable "No choices to choose from" input box text on API response wait

[chdonncha]

A bit of a complicated issue here but basically I have 2 input boxes (first - Appointment Date & second - Appointment Time), the first one which when selected make a API call to retrieve data for the second inputbox then (but any subsequent clicks on the second input box will make a fresh API call regardless).

The API can be a bit slow to respond at times so when I click the first box then (before it's gotten its first API response based on having selected a value in the previous input box) select the second box will display "No choices to choose from" like so:

This is confusing for any User since they will assume that there are no Times available but if they wait a few seconds that response will then populate the list with Times.

I want to know if there is any solution to make the other input appear as if it's loading after it gets a response in from the previous input? Like so:

This is an example snippet for the two fields:

{
  "label": "Appointment Date",
  "widget": "choicesjs",
  "key": "test1",
  "type": "select",
  "validate": {
    "json": ""
  },
  "dataSrc": "url",
  "data": {
    "url": "testUrl",
    "values": []
  },
  "template": "<span>{{ item.formatted }}</span>",
  "selectValues": "data",
  "input": true
},
{
  "label": "Appointment Time",
  "widget": "choicesjs",
  "key": "test2",
  "type": "select",
  "validate": {
    "json": ""
  },
  "dataSrc": "custom",
  "data": {
    "values": [],
    "custom": "values = window.fetchTime(submission)"
  },
  "template": "<span>{{ item.formatted }}</span>",
  "selectValues": "data",
  "input": true
}