search

ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
31 stars 8 forks source link

nimble-spinner #346

Closed gokulakrishnan-ni closed 1 year ago

gokulakrishnan-ni commented 2 years ago

😯 Problem to Solve

Need a loading spinner to show during loading/fetching state in the application

💁 Proposed Solution

Design

The sizes shall be 16, 32, & 64. @16x16 (8px squares) @32x32 (16px squares) @64x64 (32px squares)

Storybook/Documentation

Spinner Storybook page

📋 Tasks

NOTE: The squares should spin clockwise.

Related PRs

  1. 837

  2. 920

  3. 926

  4. 950

  5. 988

rajsite commented 2 years ago

@gokulakrishnan-ni Can you give more context on where the spinner will be used? Is it over specific controls? For the full page? When does it show or hide?

jattasNI commented 2 years ago

@rajsite I'm interested in where Argon will use the spinner too, but we can also ask Brandon. I think that XD came from the NI rebranding Visual Design effort.

gokulakrishnan-ni commented 2 years ago

@rajsite In Argon, there few pages where data has to be fetched from server and populate them. In the duration between the API call and the response, there should be some indication that the application is loading the page. Currently we are using mat-spinner (refer image below). The NI loading spinner from https://xd.adobe.com/view/6fc414f4-1660-4bff-4552-3e62baaa9e1e-19f5/screen/ced36959-68d6-440f-a0cc-031bc29d7e98/ will replace the mat-spinner.

image

rajsite commented 2 years ago

@gokulakrishnan-ni is a full page modal loading spinner the only use-case needed by Argon? Will there be spinners in other places? Just want to make sure all the expected use cases are captured.

I think SystemLink apps are trying to move away from full page loading spinners and instead have spinners or skeletons in specific components that are loading.

gokulakrishnan-ni commented 2 years ago

@rajsite We may also use spinners in specific components that are loading. Please consider this use case as well. Thanks.

cameronwaterman commented 2 years ago

+1 for this functionality. We are needing to replace the Grafana loading indicator (bouncing Grafana logo with "Loading" text). I might look into adding this if time permits.

jattasNI commented 2 years ago

@cameronwaterman could you post a screenshot/gif of the Grafana indicator? I'm curious if it's a full screen component, something over each tile, or something in an even smaller context like a grid row. We've had some hesitation about using the highly branded design too heavily so if that shows up in a lot of places at once we might choose to go with something more subtle.

cameronwaterman commented 2 years ago

@jattasNI - here is a gif I sent to Brandon the other day regarding this. It is the loading indication you get when the app is initially loading, so it sounds like using a "skeleton" might be more appropriate. Note: In the gif I had replaced it with an NI icon, but you get the picture (we won't be putting an NI icon there).

LoadingIcon

MaryFletcher commented 2 years ago

Test Insights also needs a loading indication for the grid that would appear when the user applies a filter and disappear when the filtered data is loaded. We are currently planning to use the sl-spinner over the grid. Loading mask: image Grid: image

rajsite commented 2 years ago

For a full page spinner (similar to the dialog discussion: https://github.com/ni/nimble/issues/378#issuecomment-1055800746 ) we should use the dialog html element in the template. WebVIs did something similar for the Busy Indicator implementation.

jattasNI commented 2 years ago

A dev in SLE is suggesting using a skeleton instead of a loading spinner in this PR.

We should consider prioritizing porting the FAST skeleton to Nimble if we think this is the right direction (I do) so that apps don't write their own styling. We'd still need designs from VxD for that. image

FYI @nate-ni

nate-ni commented 1 year ago

@jattasNI, @cameronwaterman Tracking the skeleton component separately at: #762

nate-ni commented 1 year ago

Adding usage example that show the spinner being included in a small space. In this case...a part of a cell in a table. Might be a little tough to see, but there is a spinner next to the "3%" text. It is currently using an indeterminate radial spinner.

Image

NIbokeefe commented 1 year ago

Morning All,

I've reworked our brand version of the bits-indeterminate-spinner, and included them into Nimble components.

Please take a look at the XD spec and let me know if this will cover what we need for production, and if you have any additional questions or feedback.

Navigate: Miscellaneous > Spinner - Indeterminate

https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/

nate-ni commented 1 year ago

An example of on that was made already:

https://user-images.githubusercontent.com/109235103/204301636-ddd93758-211f-49d1-9d0e-c520d9e18d93.mov

nate-ni commented 1 year ago

Example of an indeterminate progress indication in a very small space (table cell)

https://user-images.githubusercontent.com/109235103/205939513-fe946706-da5e-4842-b206-65bd636a22c9.mov

jattasNI commented 1 year ago

Here's another app (License modernization desktop UI) that needs a spinner very soon. Unclear whether it would be the bit spinner or a radial spinner. But it's being written in Blazor, so integration with that framework is important.

https://dev.azure.com/ni/DevCentral/_git/ASW/pullrequest/403221?_a=files&path=/Specs/License%20Management/Licensing%20Modernization/F2170385%20-%20Single%20Seat%20With%20Activation%20ID/Feature%20High%20Level%20Design.md

msmithNI commented 1 year ago

Reopen pending PR for Blazor and Angular integration of spinner

msmithNI commented 1 year ago

Spinner web component, and Angular + Blazor integration are now checked in. See Storybook page for notes on spinner sizing behavior.

Spinner Storybook page

nate-ni commented 1 year ago

There are some open items remaining from the original feature request that need to be addressed.