diff --git a/app/assets/stylesheets/application/hanger-spinner.css b/app/assets/stylesheets/application/hanger-spinner.css index f52085b0..3868df81 100644 --- a/app/assets/stylesheets/application/hanger-spinner.css +++ b/app/assets/stylesheets/application/hanger-spinner.css @@ -1,8 +1,4 @@ .hanger-spinner { - position: absolute; - bottom: 8px; - right: 12px; - height: 32px; width: 32px; diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index 1939fb0b..e36bcd7e 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -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 diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml index 790fdb7a..8a2fdab9 100644 --- a/app/views/items/_outfit_viewer.html.haml +++ b/app/views/items/_outfit_viewer.html.haml @@ -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: {