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 {
|
.hanger-spinner {
|
||||||
position: absolute;
|
|
||||||
bottom: 8px;
|
|
||||||
right: 12px;
|
|
||||||
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|
||||||
|
|
|
@ -58,20 +58,37 @@ body.items-show
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 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
|
opacity: 0
|
||||||
transition: opacity .5s
|
transition: opacity .5s
|
||||||
|
|
||||||
// When loading, fade in the loading spinner after a brief delay. (We only
|
// 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.)
|
// apply the delay here, because fading *out* on load should be instant.)
|
||||||
&:has(outfit-layer:state(loading))
|
&:has(outfit-layer:state(loading))
|
||||||
.hanger-spinner
|
cursor: wait
|
||||||
|
.loading-indicator
|
||||||
opacity: 1
|
opacity: 1
|
||||||
transition-delay: 2s
|
transition-delay: 2s
|
||||||
|
|
||||||
&:has(outfit-layer:state(error))
|
&:has(outfit-layer:state(error))
|
||||||
border-color: $error-border-color
|
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
|
.species-color-picker
|
||||||
.error-icon
|
.error-icon
|
||||||
cursor: help
|
cursor: help
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.outfit-viewer
|
.outfit-viewer
|
||||||
= render partial: "hanger_spinner"
|
.loading-indicator= render partial: "hanger_spinner"
|
||||||
- outfit.visible_layers.each do |swf_asset|
|
- outfit.visible_layers.each do |swf_asset|
|
||||||
%outfit-layer{
|
%outfit-layer{
|
||||||
data: {
|
data: {
|
||||||
|
|
Loading…
Reference in a new issue