diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index e36bcd7e..7b9be0ee 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -39,14 +39,13 @@ body.items-show width: 16px .outfit-viewer - position: relative display: block + position: relative width: 300px height: 300px border: 1px solid $module-border-color border-radius: 1em overflow: hidden - margin: 0 auto .75em outfit-layer @@ -69,26 +68,29 @@ body.items-show 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)) - cursor: wait - .loading-indicator - opacity: 1 - transition-delay: 2s + .error-indicator + font-size: 85% + color: $error-color + margin-top: .25em + margin-bottom: .5em + display: none - &: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 + // 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.) + // We are loading when the is busy, or when at least one layer + // is loading. + #item-preview[busy] .outfit-viewer, .outfit-viewer:has(outfit-layer:state(loading)) + cursor: wait .loading-indicator opacity: 1 transition-delay: 2s + #item-preview:has(outfit-layer:state(error)) + .outfit-viewer + border: 2px solid red + .error-indicator + display: block + .species-color-picker .error-icon cursor: help diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index 501d9328..dbdc788e 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -15,6 +15,8 @@ = turbo_frame_tag "item-preview" do = render partial: "outfit_viewer", locals: {outfit: @preview_outfit} + .error-indicator + 💥 We couldn't load all of this outfit. Try again? = form_for item_path(@item), method: :get, class: "species-color-picker", data: {"is-valid": @preview_error.nil?} do |f|