nimble-spinner #346

gokulakrishnan-ni · 2022-02-10T10:37:05Z

rajsite · 2022-02-22T01:18:22Z

@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 · 2022-02-22T15:48:44Z

@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 · 2022-02-22T17:00:42Z

@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.

rajsite · 2022-02-22T17:39:35Z

@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 · 2022-02-23T16:05:29Z

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

cameronwaterman · 2022-03-02T22:06:42Z

+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 · 2022-03-02T22:24:48Z

@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 · 2022-03-02T22:27:55Z

@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).

MaryFletcher · 2022-03-03T15:05:49Z

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:

Grid:

rajsite · 2022-03-08T17:25:55Z

For a full page spinner (similar to the dialog discussion: #378 (comment) ) we should use the dialog html element in the template. WebVIs did something similar for the Busy Indicator implementation.

jattasNI · 2022-07-28T16:29:26Z

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.

FYI @nate-ni

nate-ni · 2022-10-06T15:15:09Z

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

nate-ni · 2022-10-13T14:12:48Z

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.

NIbokeefe · 2022-11-16T17:04:45Z

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.

16, 32 and 64 size examples
Multiple UI color themes
Animation timing
Determinate version TBD
Lets use this design universally for all indeterminate instances, which will help keep brand consistency. Unless there is a proposal (now or in the future) that provides a specific use case where this 'bits' indeterminate spinner will not work; meaning it's a UX issue for the user.

Navigate: Miscellaneous > Spinner - Indeterminate

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

nate-ni · 2022-11-28T14:24:15Z

An example of on that was made already:

spinner-in-action.mov

nate-ni · 2022-12-06T14:30:44Z

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

File-Upload-Progress.mov

jattasNI · 2022-12-12T20:52:15Z

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

# Pull Request ## 🤨 Rationale Creating spec for spinner component. Also see #346 ## 👩‍💻 Implementation Based on 'custom component' template. Deriving from the FAST `progress-ring` is an option but not currently planned for this spinner (see spec). ## 🧪 Testing N/A ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

# Pull Request ## 🤨 Rationale Fixes #346 **Note on spinner sizes:** Brandon added [additional sizes in the XD design doc](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/dece308f-79e7-48ec-ab41-011f3376b49b/specs/). However, after some more discussion we're not adding a `size` attribute with these specific sizes for now, the component will scale to the width/height it's given (via CSS styles). Default is 16x16. The additional sizes are described in Storybook on the Spinner's doc page. See PR discussion/comments for more info. (Angular/Blazor integration will be a followup PR) ## 👩‍💻 Implementation See [the spec and its PR/discussion](#837) for implementation details. Simple element (no attributes/properties), mostly CSS animations, including a simplified `prefers-reduced-motion` animation. ## 🧪 Testing Tested locally, with + without OS animations (to test prefers-reduced-motion). Added autotests + Storybook stories. ## ✅ Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. - Component table will be updated with the next PR (Angular/Blazor integration)

msmithNI · 2022-12-16T02:53:46Z

Reopen pending PR for Blazor and Angular integration of spinner

# Pull Request ## 🤨 Rationale Related Issue: - #346 ## 👩‍💻 Implementation - Standard Angular integration (add directive, update example app, autotest for custom element) - Standard Blazor integration (add Razor component, update example app) - Update component table to reflect spinner being available ## 🧪 Testing - Autotests - Ran Angular and Blazor example apps locally ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

msmithNI · 2022-12-17T01:04:57Z

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 · 2022-12-17T17:17:59Z

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

# Pull Request ## 🤨 Rationale Associated feature - #346 Nathan Mitchell, Fred Visser, Jesse Attas, and myself had a followup discussion about spinner sizes. The end result was that we wanted it to be easier for users to use the designer-prescribed spinner sizes. Nathan followed up with Brandon O'Keefe to confirm the 3 spinner sizes desired (they still went with 16/32/64, which also matches the spec). Separately I looked at the spinner usages in SystemLink Enterprise, and the vast majority are also 16x16, so I'm keeping 16x16 the default size as it was previously. After discussion with the dev team, we decided to use design tokens to provide the designer-provided `small` `medium` and `large` sizes (instead of a `size` DOM attribute). Consumers can set the `height` to a token as outlined in the spinner Storybook docs/examples. ## 👩‍💻 Implementation - Add design tokens `spinnerSmallHeight` (16px), `spinnerMediumHeight` (32px), and `spinnerLargeHeight` (64px). 16px (small) is the default, so using that token is optional. - Add `aspect-ratio: 1 / 1` to the spinner styling, so consumers can just set height (instead of both width and height) - Update Storybook docs to cover the 3 sizes and explain how to set them, and some examples of where they should be used in a page - Update theme matrix story to have those 3 sizes ## 🧪 Testing - Autotests - Looked at updated stories ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

gokulakrishnan-ni added enhancement New feature or request triage New issue that needs to be reviewed labels Feb 10, 2022

m-akinc removed the triage New issue that needs to be reviewed label Feb 14, 2022

fredvisser added the client request Client team would immediately benefit from this change label Feb 17, 2022

rajsite added the waiting for response Blocked on response from reporter label Feb 22, 2022

rajsite removed the waiting for response Blocked on response from reporter label Feb 24, 2022

rajsite mentioned this issue Jul 12, 2022

Nimble dialog spec #623

Merged

1 task

nate-ni added this to Nimble Design System Priorities Aug 5, 2022

nate-ni changed the title ~~Add Loading Spinner to Nimble Library~~ nimble-spinner Sep 7, 2022

m-akinc moved this to 📆 Current Iteration in Nimble Design System Priorities Nov 14, 2022

m-akinc assigned msmithNI Nov 14, 2022

nate-ni mentioned this issue Nov 14, 2022

Design for nimble spinner #822

Closed

m-akinc moved this from 📆 Current Iteration to 🏗 In progress in Nimble Design System Priorities Nov 28, 2022

jattasNI mentioned this issue Nov 28, 2022

WaferMap component - basic storybook implementation #834

Merged

1 task

msmithNI mentioned this issue Nov 29, 2022

Nimble spinner spec #837

Merged

1 task

msmithNI mentioned this issue Dec 13, 2022

Spinner design followup (PowerGreen only vs. changeable color) #916

Closed

msmithNI mentioned this issue Dec 14, 2022

Spinner component #920

Merged

1 task

msmithNI closed this as completed in #920 Dec 16, 2022

msmithNI reopened this Dec 16, 2022

msmithNI mentioned this issue Dec 16, 2022

Spinner: Angular and Blazor integration, update component table #926

Merged

1 task

msmithNI closed this as completed Dec 17, 2022

nate-ni reopened this Dec 17, 2022

msmithNI mentioned this issue Jan 6, 2023

Spinner size followup #950

Closed

1 task

msmithNI mentioned this issue Jan 20, 2023

Spinner size followup (using design tokens) #988

Merged

1 task

nate-ni moved this from In progress to Done in Nimble Design System Priorities Jan 24, 2023

nate-ni closed this as completed Jan 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

nimble-spinner #346

nimble-spinner #346

gokulakrishnan-ni commented Feb 10, 2022 •

edited by nate-ni

Loading

rajsite commented Feb 22, 2022

jattasNI commented Feb 22, 2022

gokulakrishnan-ni commented Feb 22, 2022

rajsite commented Feb 22, 2022

gokulakrishnan-ni commented Feb 23, 2022

cameronwaterman commented Mar 2, 2022

jattasNI commented Mar 2, 2022

cameronwaterman commented Mar 2, 2022 •

edited

Loading

MaryFletcher commented Mar 3, 2022

rajsite commented Mar 8, 2022 •

edited

Loading

jattasNI commented Jul 28, 2022

nate-ni commented Oct 6, 2022

nate-ni commented Oct 13, 2022 •

edited

Loading

NIbokeefe commented Nov 16, 2022

nate-ni commented Nov 28, 2022 •

edited

Loading

nate-ni commented Dec 6, 2022 •

edited

Loading

jattasNI commented Dec 12, 2022

msmithNI commented Dec 16, 2022

msmithNI commented Dec 17, 2022

nate-ni commented Dec 17, 2022

nimble-spinner #346

nimble-spinner #346

Comments

gokulakrishnan-ni commented Feb 10, 2022 • edited by nate-ni Loading

😯 Problem to Solve

💁 Proposed Solution

Design

Storybook/Documentation

📋 Tasks

Related PRs

rajsite commented Feb 22, 2022

jattasNI commented Feb 22, 2022

gokulakrishnan-ni commented Feb 22, 2022

rajsite commented Feb 22, 2022

gokulakrishnan-ni commented Feb 23, 2022

cameronwaterman commented Mar 2, 2022

jattasNI commented Mar 2, 2022

cameronwaterman commented Mar 2, 2022 • edited Loading

MaryFletcher commented Mar 3, 2022

rajsite commented Mar 8, 2022 • edited Loading

jattasNI commented Jul 28, 2022

nate-ni commented Oct 6, 2022

nate-ni commented Oct 13, 2022 • edited Loading

NIbokeefe commented Nov 16, 2022

nate-ni commented Nov 28, 2022 • edited Loading

nate-ni commented Dec 6, 2022 • edited Loading

jattasNI commented Dec 12, 2022

msmithNI commented Dec 16, 2022

msmithNI commented Dec 17, 2022

nate-ni commented Dec 17, 2022

gokulakrishnan-ni commented Feb 10, 2022 •

edited by nate-ni

Loading

cameronwaterman commented Mar 2, 2022 •

edited

Loading

rajsite commented Mar 8, 2022 •

edited

Loading

nate-ni commented Oct 13, 2022 •

edited

Loading

nate-ni commented Nov 28, 2022 •

edited

Loading

nate-ni commented Dec 6, 2022 •

edited

Loading