MENU/SELECT/COMBOBOX: UI needs to better handle slow loading of dynamic content

[jordanjones243]

Describe the bug

The user is never notified via the UI that dynamic content is loading.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.alaskaair.com/search-test/
2. Open inspector and in the network tab, select a throttling option. Suggested slow 3G
3. Click in the "From" or "To" combobox
4. Type something
5. See error

Expected behavior

Users can see that content is loading (ex. a loading icon)

[blackfalcon]

Discussed in team refinement. Engineer suggestion. Requires UI/Design review from @leeejune and others.

It is interesting to go back to the flight-search team and how they address a slow connection dropdown, e.g. MOW experience.

Unable to be sized as this time as we need design feedback.

[leeejune]

I cannot recreate the error. Is there a link to the MOW experience mentioned above by @blackfalcon?

[blackfalcon]

@leeejune I updated the instructions for how to repeat the error. This also works hand-in-hand with this issue as well.

• Improve dynamic menu example auro-combobox#117

[leeejune]

Reached out to Callie Johnson for UX writing feedback. Design will be reviewed after getting an answer.

[leeejune]

Answer received: "This location doesn't match any airports in our network. Please try another."

For a more generic message, we can use:

"This keyword doesn't match anything in our network. Please try another."

[blackfalcon]

@Patrick-Daly-AA we should get this rolled into other work being addressed on the combobox for an upcoming release.

[jason-capsule42]

The understanding of this ticket has morphed from the original issue. There is a separate issue around a bug in displaying the "noMatch" option when the filters have removed all options because the search string in the input doesn't match anything. That is different than this issue.

This issue is that in dynamically generated option lists (meaning when the combobox is first loaded, it has no options, the options are only inserted after first load). Flight Search is doing example this - they do not load any airports into the DOM until the user starts to type.

What this ticket is meant to address is this - what do we show in the UI while we are waiting for that API call to complete, return a data set and the code to generate a list of menu options for the DOM runs... that could be an amount of time that results in a noticable lag for the user where the menu is empty, long enough that they may think there are no options and abandon the combobox allowing the bib to close.

The suggested change here is to support a "loading..." start where anyone dynamically generating there menu content could have a rendered state that informs the user that options are being fetched rather than just making it look like there are no options at all.

[jordanjones243]

Jason is correct. The issue at hand is that we need a better way to display to a user that the dynamic content is still loading and being placed into a dropdown. This issue needs to be updated with a new example demonstrating this update.

[blackfalcon]

Jason is correct. The issue at hand is that we need a better way to display to a user that the dynamic content is still loading and being placed into a dropdown. This issue needs to be updated with a new example demonstrating this update.

This really could be a simple example of having content loaded into the dropdown via JavaScript on a delay and showing an auro-loader in the space prior to the content. Just to illustrate the idea.

In the end, I would put the onus on the consumer of the components to manage this UI interaction as we have no insight as to their data, it's load pattern, etc... And it's not our place to dictate that either.

[Patrick-Daly-AA]

Need input from design for what this should look like.

[michelle-alaskaair]

Design recommendations for dynamic menu content loading indicators:

1. Default: For most use cases, we recommend not opening the bib until dynamic content has loaded in the menu. No loader is necessary since content should load as the user types and could be confusing for a screen reader to announce both the text input and loader.
2. Loader: If a loader is desired, < auro-loader orbit xs > may be used with or without customizable text, or loading text only.

See Figma for full specs >

[sun-mota]

change to auro-menu
add loading attribute

• if true, hide all menu option and show only the predefined menu-option for the loading state with the loading slot
• this loading menu-option is disabled
  add a slot for the loading text string