From 6bc0c55000c13fad118d919ffa0ab2f1c4514064 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 7 Jul 2024 19:05:48 -0700
Subject: [PATCH] Use our hanger loading spinner for the new item page previews

It's back, wowie! Also written up in a bit of a component-y way. Cute!
---
 .../application/hanger-spinner.css            | 68 +++++++++++++++++++
 app/assets/stylesheets/items/_show.sass       | 10 ++-
 app/views/application/_hanger_spinner.html    |  6 ++
 app/views/items/_outfit_viewer.html.haml      |  1 +
 app/views/items/show.html.haml                |  3 +
 5 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/application/hanger-spinner.css
 create mode 100644 app/views/application/_hanger_spinner.html

diff --git a/app/assets/stylesheets/application/hanger-spinner.css b/app/assets/stylesheets/application/hanger-spinner.css
new file mode 100644
index 00000000..f52085b0
--- /dev/null
+++ b/app/assets/stylesheets/application/hanger-spinner.css
@@ -0,0 +1,68 @@
+.hanger-spinner {
+	position: absolute;
+	bottom: 8px;
+	right: 12px;
+
+	height: 32px;
+	width: 32px;
+
+	@media (prefers-reduced-motion: no-preference) {
+		animation: 1.2s infinite hanger-spinner-swing;
+		transform-origin: top center;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: 1.6s infinite hanger-spinner-fade-pulse;
+	}
+}
+
+/*
+	Adapted from animate.css "swing". We spend 75% of the time swinging,
+	then 25% of the time pausing before the next loop.
+
+	We use this animation for folks who are okay with dizzy-ish motion.
+	For reduced motion, we use a pulse-fade instead.
+*/
+@keyframes hanger-spinner-swing {
+	15% {
+		transform: rotate3d(0, 0, 1, 15deg);
+	}
+
+	30% {
+		transform: rotate3d(0, 0, 1, -10deg);
+	}
+
+	45% {
+		transform: rotate3d(0, 0, 1, 5deg);
+	}
+
+	60% {
+		transform: rotate3d(0, 0, 1, -5deg);
+	}
+
+	75% {
+		transform: rotate3d(0, 0, 1, 0deg);
+	}
+
+	100% {
+		transform: rotate3d(0, 0, 1, 0deg);
+	}
+}
+
+/*
+	A homebrew fade-pulse animation. We use this for folks who don't
+	like motion. It's an important accessibility thing!
+*/
+@keyframes hanger-spinner-fade-pulse {
+	0% {
+		opacity: 0.2;
+	}
+
+	50% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0.2;
+	}
+}
diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 79f6791b..1939fb0b 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -58,8 +58,16 @@ body.items-show
         width: 100%
         height: 100%
 
+    .hanger-spinner
+      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))
-      background: gray
+      .hanger-spinner
+        opacity: 1
+        transition-delay: 2s
 
     &:has(outfit-layer:state(error))
       border-color: $error-border-color
diff --git a/app/views/application/_hanger_spinner.html b/app/views/application/_hanger_spinner.html
new file mode 100644
index 00000000..dc3ad717
--- /dev/null
+++ b/app/views/application/_hanger_spinner.html
@@ -0,0 +1,6 @@
+<svg class="hanger-spinner" viewBox="0 0 473 473">
+	<path
+		fill="currentColor"
+		d="M451.426,315.003c-0.517-0.344-1.855-0.641-2.41-0.889l-201.09-88.884v-28.879c38.25-4.6,57.136-29.835,57.136-62.28c0-35.926-25.283-63.026-59.345-63.026c-35.763,0-65.771,29.481-65.771,64.384c0,6.005,4.973,10.882,10.978,10.882c1.788,0,3.452-0.535,4.934-1.291c3.519-1.808,6.024-5.365,6.024-9.591c0-22.702,20.674-42.62,44.217-42.62c22.003,0,37.982,17.356,37.982,41.262c0,23.523-19.011,41.262-44.925,41.262c-6.005,0-10.356,4.877-10.356,10.882v21.267v21.353c0,0.21-0.421,0.383-0.401,0.593L35.61,320.55C7.181,330.792-2.554,354.095,0.554,371.881c3.194,18.293,18.704,30.074,38.795,30.074H422.26c23.782,0,42.438-12.307,48.683-32.942C477.11,348.683,469.078,326.766,451.426,315.003z M450.115,364.031c-3.452,11.427-13.607,18.8-27.846,18.8H39.349c-9.725,0-16.104-5.394-17.5-13.368c-1.587-9.104,4.265-22.032,21.831-28.42l199.531-94.583l196.844,87.65C449.303,340.717,453.434,353.072,450.115,364.031z"
+	/>
+</svg>
diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml
index 09f76c81..790fdb7a 100644
--- a/app/views/items/_outfit_viewer.html.haml
+++ b/app/views/items/_outfit_viewer.html.haml
@@ -1,4 +1,5 @@
 .outfit-viewer
+  = render partial: "hanger_spinner"
   - outfit.visible_layers.each do |swf_asset|
     %outfit-layer{
       data: {
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 92b0d75b..501d9328 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -39,6 +39,9 @@
         %li= link_to(contributor.name, user_contributions_path(contributor)) + format_contribution_count(count)
     %footer= t '.contributors.footer'
 
+- content_for :stylesheets do
+  = stylesheet_link_tag "application/hanger-spinner"
+
 - content_for :javascripts do
   = javascript_include_tag "lib/idiomorph", async: true
   = javascript_include_tag "outfit-viewer", async: true