Comments (8)
Not sure about the architecture, but maybe this could be implemented in a similar way as the Select's loading
indicator.
from ui.
Yeah, that should be no problem! Wondering if we'd need that for both the source
- as well as picked
options' sides?
from ui.
Wondering if we'd need that for both the source- as well as picked options' sides?
Yeah I was wondering that as well. I assume only the source side? @cooper-joe, what do you think?
from ui.
Yeah, let's include for both sides. There could definitely be cases where a slow connection is waiting to get the 'picked' options from the server. I'll make sure it's on the spec!
from ui.
So would the loading scenarios be independent? Or would a single loading flag suffice? I guess as soon as you don't have the options, you can't display the selected options either, right?
from ui.
So would the loading scenarios be independent? Or would a single loading flag suffice? I guess as soon as you don't have the options, you can't display the selected options either, right?
Good question. I think in the vast majority of cases it will be fine to control the loading with single flag. There could be some cases where picked
options are loaded from a separate place than source
options, but you'd probably want to put the entire component into loading...
mode then anyway. So, I think a single loading flag would suffice.
from ui.
Yeah, let's include for both sides. There could definitely be cases where a slow connection is waiting to get the 'picked' options from the server. I'll make sure it's on the spec!
I agree to include it for both sides. For https://jira.dhis2.org/browse/DHIS2-8831 the available options are fetched async from the server, while the picked are available from the start. However, since the picked options get generated by matching those with the available ones, this means that the right side will display "No items selected" while the available options are loaded.
In the case above, the loading is fine to control with a single flag, but I suppose there could be cases where both sides are fetched async independently. However it doesn't make sense to display one side before the other, since that could flash options that are/aren't available incorrectly before both sides are loaded.
E.g. X, Y, Z are available/source. Z is selected/picked. Both are fetched async independently.
- If the available return first, it will display X, Y, Z as available (incorrect, only X, Y are actually available) until the selected are returned as well.
- If the selected are returned first, it won't be able to match Z with an available option, leading to "No items selected" until the available are returned as well.
This would however be different (but still applicable) if the future flag "distinctSourceAndPickedOptions" (as discussed with @Mohammer5) is in place, which separates the source and picked options, to display selected options that aren't available in the source.
from ui.
Loading states are now present. For the selected options during the loading state, this has been addressed in #143
from ui.
Related Issues (20)
- The automated release is failing 🚨 HOT 1
- Transfer: add a prop for scrolling source to top HOT 1
- FlyoutMenu inside a Popover: a double border is shown HOT 1
- FlyoutMenu with a disabled MenuItem requires onClick HOT 1
- Transfer: onEndReached not triggered if an item is selected HOT 4
- Hovering over a SingleSelectField's label gives a console warning HOT 1
- OrganisationUnitTree: Alphabetical sorting HOT 1
- Content of disabled buttons is not as legible due to decreased opacity HOT 4
- Enabled textfields don't have a white background HOT 2
- Infinite scrolling improvements HOT 1
- Translation error HOT 1
- Scrollbar showing in select at certain zoom levels HOT 2
- Label and field typography adjustments
- Disabled toggle styles only affects text labels HOT 1
- Simplify button styles HOT 1
- 100% cpu usage with certain use of the alertstack/alertbar HOT 3
- Only add icon to the first button in SplitButton HOT 1
- test HOT 1
- Tabs component DX is not consistent with Select/Transfer HOT 2
- The automated release is failing 🚨
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.