Awx: Establish and implement loading state

[mabashian]

In yolotower we use the Loading... spinner down in the bottom right corner to indicate that we're interacting with the api. We also slap a transparent div over the entire application to prevent the user from clicking on anything while we're making our requests.

We'll want to establish a ux flow around "loading" when:

a) Initially loading a list
b) Navigating from one page to another
c) Sorting the list
d) (In the future) performing a search

We have the current loading screen mockup:

My initial impression was that this would be shown _instead_ of the list during the aforementioned actions but as @marshmalien pointed out to me, this would cause a flash when going from page to page which we currently don't have.

I've opened up this issue to track discussion and eventually outline exactly what needs to be implemented.

[marshmalien]

After discussing this issue with @mabashian and @trahman73, we've proposed the following:

On initial list load:

• List is in a loading state (fetching data), resource count is unknown:

  • Show empty card panel with spinner icon centered within the list panel
  • Hide toolbar, delete, checkbox
  • Show Add button
  • Mockup:
    

• List is not in a loading state. There are no resources:

  • Show PF-4 EmptyState component
  • Hide toolbar, delete, checkbox
  • Show Add button
  • Mockup:
    

• List is not in a loading state. There are resources:

  • Show resource list

Paginating through list

• List is in a loading state (fetching data):
  
  
  
  • Keep the current list
  
  
  • Overlay a spinner centered within the list panel (Sync-up with @trahman73 to determine the height)
  
  
  • Render new list once api request completes
  
  
  • Add Spinner icon: fa-spinner
  
  
  • Add overlay with opacity. See mockup.
  
  
  • Mockup:
    
    
  
  

Sorting the list

• List is in a loading state:
  
  
  
  • Keep the current list
  
  
  • Overlay a spinner centered within the list panel
  
  
  • Render new list once api request completes
  
  
  • Spinner icon: fa-spinner
  
  

(In the future) Searching the list

• List is in a loading state:

  • Keep the current list
  • Overlay a spinner centered within the list panel
  • Render new list once api request completes
  • Spinner icon: fa-spinner

• List is in not in a loading state. There are no resources:

  • Show toolbar, action buttons, search tags
  • Mockup:
    

Other related patterns that we should flesh out:

• Copying a resource
• Job Launch with a redirect
• Should we disable actionable items while spinner is visible?

[jlmitch5]

The other thing we will want to make sure of in terms of this feature is that loading doesn't cause a lot of flashing (panes going away and coming back on the screen). The pane itself should probably have a min-width or something so that it looks smooth as it transitions between these states.

[keithjgrant]

Relevant: React is expecting to add Suspense for data fetching to their API mid-2019: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html#react-16x-mid-2019-the-one-with-suspense-for-data-fetching

I don't know if we can wait that long before implementing this, but it's worth keeping an eye on

[mabashian]

Note that https://github.com/ansible/awx/blob/devel/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx is in place until we come up with a solid plan.

[mabashian]

http://patternfly-react.surge.sh/documentation/react/components/spinner is now a thing. We should probably be using that as the spinner.

[mabashian]

Skeleton loader is coming in PF: https://github.com/patternfly/patternfly-react/pull/4755. When that lands we should look at making the switch. Going to mark this as blocked for now.

[mabashian]

Link https://github.com/ansible/awx/issues/4241

[mabashian]

Note that this loading state should apply to more than just lists. It should apply to anywhere that we want to show a loading screen while data is being fetched.

[mabashian]

See http://patternfly-react.surge.sh/components/skeleton

[nixocio]

When deleting/disassociating batch of resources as well it would be nice to display loading... or give the user a feedback of the action being executed.

[unlikelyzero]

@AlexSCorey @tiagodread let's perform a lighthouse performance test with and without this change

[keithjgrant]

Relevant: React is expecting to add Suspense for data fetching to their API mid-2019: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html#react-16x-mid-2019-the-one-with-suspense-for-data-fetching

I don't know if we can wait that long before implementing this, but it's worth keeping an eye on

Me in November 2020: 🤣

[AlexSCorey]

PF says the Skeleton should be used in places where we know what we are waiting on and what form it will take...otherwise use the spinner. https://www.patternfly.org/v4/components/skeleton/design-guidelines#usage

[tiagodread]

@AlexSCorey @unlikelyzero @mabashian in terms of testing, it’s been a pain know when the page is fully loaded because sometimes we have nested requests, I wonder if is possible to throw up an event that could be easily listened by the test, to know when the page is safely fully loaded.

There's a Open UI Automation standard that helps make it easier: Page Safe

[unlikelyzero]

please update this ticket when the work is completed https://github.com/ansible/awx/issues/7004

[tiagodread]

Verified that the loading spinner is displayed across ui next while fetching data, also added a e2e test in https://github.com/ansible/tower-qa/pull/5861