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:
Emi Matchu 2024-07-07 21:32:41 -07:00
parent 83eec2db60
commit 059644f847
3 changed files with 20 additions and 7 deletions

View file

@ -1,8 +1,4 @@
.hanger-spinner {
position: absolute;
bottom: 8px;
right: 12px;
height: 32px;
width: 32px;

View file

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

View file

@ -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: {