app/assets/javascripts/outfit-viewer.js

@@ -21,10 +21,6 @@ class OutfitViewer extends HTMLElement {
 			this.#setIsPlaying(playPauseToggle.checked);
 			this.#setIsPlayingCookie(playPauseToggle.checked);
 		});
-
-		// Tell the CSS our first frame has rendered, which we use for loading
-		// state transitions.
-		this.#internals.states.add("after-first-frame");
 	}
 
 	#setIsPlaying(isPlaying) {

app/assets/stylesheets/items/_show.sass

@@ -135,24 +135,15 @@ body.items-show
     margin-bottom: .5em
     display: none
 
-  // When loading, fade in the loading spinner after a brief delay. We are
+  // When loading, fade in the loading spinner after a brief delay. (We only
-  // loading when the <turbo-frame> is busy, or when at least one layer
+  // apply the delay here, because fading *out* on load should be instant.)
+  // We are loading when the <turbo-frame> is busy, or when at least one layer
   // is loading.
-  //
-  // We only apply the delay here, not on the base styles, because fading
-  // *out* on load should be instant. We also wait for the outfit-viewer to
-  // execute a `setTimeout(0)`, to make sure we always *start* in the
-  // non-loading state. This is because it's sometimes possible for the page to
-  // start with the web component already in `state(loading)`, and we need to
-  // make sure we *start* in *non-loading* state for the transition delay to
-  // happen. (This can happen when you Turbo-navigate between multiple items.)
   #item-preview[busy] outfit-viewer, outfit-viewer:has(outfit-layer:state(loading))
     cursor: wait
-
+    .loading-indicator
-    &:state(after-first-frame)
+      opacity: 1
-      .loading-indicator
+      transition-delay: 2s
-        opacity: 1
-        transition-delay: 2s
 
   #item-preview:has(outfit-layer:state(error))
     outfit-viewer

app/assets/stylesheets/outfits/_new.sass

@@ -7,8 +7,9 @@ body.outfits-new
   #pet-not-found
     display: none
 
-  .announcement
+  .neopass-announcement
-    border: 1px solid $module-border-color
+    border: 1px solid #cd8400
+    color: #764a00
     padding: .5em
     display: grid
     grid-template-areas: "thumbnail content"
@@ -23,6 +24,9 @@ body.outfits-new
     p:last-of-type
       margin-bottom: 0
 
+    a
+      color: #be7a00
+
   #outfit-forms
     +clearfix
     +module

app/helpers/outfits_helper.rb

@@ -1,7 +1,7 @@
 module OutfitsHelper
-  LAST_DAY_OF_ANNOUNCEMENT = Date.parse("2024-09-13")
+  LAST_DAY_OF_NEOPASS_ANNOUNCEMENT = Date.parse("2024-05-05")
-  def show_announcement?
+  def show_neopass_announcement?
-    Date.today <= LAST_DAY_OF_ANNOUNCEMENT
+    Date.today <= LAST_DAY_OF_NEOPASS_ANNOUNCEMENT
   end
 
   def destination_tag(value)

app/views/outfits/new.html.haml

@@ -4,27 +4,26 @@
 
 %p#pet-not-found.alert= t 'pets.load.not_found'
 
-- if show_announcement?
+- if show_neopass_announcement?
-  %section.announcement
+  %section.neopass-announcement
-    = image_tag "about/announcement.png", width: 70, height: 70,
+    = image_tag "about/neopass-survey.png", width: 70, height: 70,
-      srcset: {"about/announcement@2x.png": "2x"},
+      srcset: {"about/neopass-survey@2x.png": "2x"},
       class: "neopass-thumbnail"
-    .content
+    .neopass-content
       %p
         %strong
-          = link_to "We've updated the item page!",
+          💭 Thank you for sending us your NeoPass feedback!
-                    item_path("37002-Floating-Negg-Faerie-Doll")
-        It should load faster, work better on phones, and be more reliable—no
-        more "failed to fetch"! Please try it out and let us know if it does
-        anything weird!!
 
-      %p{style: "font-style: italic; opacity: .85; font-size: 85%"}
+      %p
-        By the way, our integration work with TNT is on pause while they focus
+        We're working with TNT now to build new integrations, based on what you
-        on the
+        told us! We're glad
-        = link_to "~Void Within plot~!", "https://www.neopets.com/tvw/",
+        = link_to "log in with NeoPass", about_neopass_path
-                  target: "_blank", style: "color: purple; font-weight: bold"
+        is working well, and we're excited to do the next part! More info soon!
+
+      %p
+        Thanks again to everyone for helping us out! We're grateful, as always 💖
         %br
-        We'll start it back up closer to the new year.
+        %em —Matchu
 
 #outfit-forms
   - localized_cache :action_suffix => 'outfit_forms_intro' do
@@ -135,4 +134,4 @@
   = javascript_include_tag 'ajax_auth', 'lib/jquery.timeago', defer: true
 
 - content_for :javascripts_body do
-  = javascript_include_tag 'outfits/new', defer: true
+  = javascript_include_tag 'outfits/new', defer: true