forked from OpenNeo/impress
Improve the loading indicator for the new item page previews
Add some unobtrusive white background for contrast, show it when the Turbo frame is loading too, add a spinner cursor, and fix a silliness of how we put the `position: absolute` stuff into the component-y part of the hanger spinner instead of this specific use case lol oops!
This commit is contained in:
parent
83eec2db60
commit
059644f847
3 changed files with 20 additions and 7 deletions
|
@ -1,8 +1,4 @@
|
|||
.hanger-spinner {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 12px;
|
||||
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
|
|
|
@ -58,20 +58,37 @@ body.items-show
|
|||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.hanger-spinner
|
||||
.loading-indicator
|
||||
position: absolute
|
||||
z-index: 999
|
||||
bottom: 0px
|
||||
right: 4px
|
||||
padding: 8px
|
||||
background: radial-gradient(circle closest-side, white 45%, #ffffff00)
|
||||
|
||||
opacity: 0
|
||||
transition: opacity .5s
|
||||
|
||||
// When loading, fade in the loading spinner after a brief delay. (We only
|
||||
// apply the delay here, because fading *out* on load should be instant.)
|
||||
&:has(outfit-layer:state(loading))
|
||||
.hanger-spinner
|
||||
cursor: wait
|
||||
.loading-indicator
|
||||
opacity: 1
|
||||
transition-delay: 2s
|
||||
|
||||
&:has(outfit-layer:state(error))
|
||||
border-color: $error-border-color
|
||||
|
||||
// We also show the loading spinner when the item preview Turbo frame is
|
||||
// loading in new data for us.
|
||||
turbo-frame#item-preview[busy]
|
||||
.outfit-viewer
|
||||
cursor: wait
|
||||
.loading-indicator
|
||||
opacity: 1
|
||||
transition-delay: 2s
|
||||
|
||||
.species-color-picker
|
||||
.error-icon
|
||||
cursor: help
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.outfit-viewer
|
||||
= render partial: "hanger_spinner"
|
||||
.loading-indicator= render partial: "hanger_spinner"
|
||||
- outfit.visible_layers.each do |swf_asset|
|
||||
%outfit-layer{
|
||||
data: {
|
||||
|
|
Loading…
Reference in a new issue