Add loading feedback while the inspector library is fetched over the network #2006
Conversation
ngokevin
left a comment
ngokevin
left a comment
There was a problem hiding this comment.
I'd add a delay before adding the overlay (like 500ms). For a fast connection where it's fairly instant, it's jarring to have it flash. The loading message ellipsis is buggy, I can only get it to get to 2 ticks/steps, I don't see the dots.
| this.overlayEl.style.height = '600px'; | ||
| this.overlayEl.style.textAlign = 'left'; | ||
|
|
||
| this.loadingMessageEl = document.createElement('div'); |
There was a problem hiding this comment.
I'd give it text-transform: capitalize, increased font size, and monospace font-family.
src/components/scene/inspector.js
Outdated
|
|
||
| initOverlay: function () { | ||
| this.overlayEl = document.createElement('div'); | ||
| this.overlayEl.style.backgroundColor = '#222'; |
There was a problem hiding this comment.
Could do setAttribute('style', ...) here and below to be more compact.
There was a problem hiding this comment.
Is not constructing the string to set multiple CSS attributes more cumbersome than just setting style.XXX = YYY
There was a problem hiding this comment.
You could also put it in the A-Frame CSS stylesheet.
src/components/scene/inspector.js
Outdated
| this.loadingMessageEl.innerHTML = message + '...'; | ||
| return; | ||
| } | ||
| console.log(step); |
src/components/scene/inspector.js
Outdated
| }, | ||
|
|
||
| init: function () { | ||
| this.loadingMessage = 'Loading Inspector'; |
There was a problem hiding this comment.
this could just be a constant rather than a property of the component
var LOADING_MESSAGE
|
If you add a delay to the overlay you won't see immediate feedback from your action (the keyboard shortcut). I like to see something as soon as I press the shortcut. 500ms is a lot of time and it feels slow |
|
What do you mean by buggy? It works fine on my machine |
|
I thought forcing the overlay to show up for at least 500ms but considered unfair to slow down the UI if things can go faster. |
|
You can tweak the value, but less than that, then the immediate feedback is simply the Inspector opening up. On faster connections, it already feels immediate. |
|
What about having something in a corner instead of the whole page. I agree with @ngokevin that being on fast connections you can't read anything but looks like something buggy. |
|
I like that. Then don't need to worry about the full-screen flash. Maybe on the top left where the Open Inspector / Back to Scene buttons are. When the scene is open though, a neutral color looks better than the A-Frame red. |
|
The feedback should also be hard to miss. When pressing the shortcut is important to clearly show that something is going on. The loading feedback is specially important for people that use / discover the inspector for the first time. Something tiny on one corner might pass unnoticed for those users. |
|
But I believe users already got used of looking around if something is not working. For example if you click a link and something is not working people could look at the windows clock, or the chrome spinner on the tab. Also when you use apps like googledocs or so, the saving feedback, even if it's taking a while, it's shown on the corners instead of fullscreen. I can't remember now any example of such big screen feedback. Maybe we could make it brighter or bigger, if it's taking some time they'll notice that there's something there, it's not that hard to miss that something completely different from the scene just pop up there |
|
It's not only that people are used to it. People cope with a lot unconvenient and bad designed things. We should think about what's the least likely design to produce undesired outcomes and the one with lowest risk of confusion. I can try introducing a 100ms delay on the overlay. |
|
In the embedded case putting the loader in the corner is specially bad. |
|
I made the loader similar to the inspector button: |
|
I also replaced the JS based animation with CSS |
dmarcos
force-pushed
the
inspectorLoader
branch
from
9801e65 to
5df4bc5
Compare
|
I like it! |
|
🎉 |
3 participants
No description provided.