Only spin loading spinners if user does not prefer reduced motion (#5919

)
phoenixframework · Sep 1, 2024 · 19b68e1 · 19b68e1
1 parent 76f2ea3
commit 19b68e1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/installer/templates/phx_web/components/core_components.ex b/installer/templates/phx_web/components/core_components.ex
@@ -88,7 +88,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         hidden
       >
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
-        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
 
       <.flash
@@ -100,7 +100,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         hidden
       >
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
-        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
     </div>
     """
@@ -516,7 +516,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   ## Examples
 
       <.icon name="hero-x-mark-solid" />
-      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 motion-safe:animate-spin" />
   """
   attr :name, :string, required: true
   attr :class, :string, default: nil

diff --git a/priv/templates/phx.gen.live/core_components.ex b/priv/templates/phx.gen.live/core_components.ex
@@ -88,7 +88,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         hidden
       >
         <%= maybe_eex_gettext.("Attempting to reconnect", @gettext) %>
-        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
 
       <.flash
@@ -100,7 +100,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
         hidden
       >
         <%= maybe_eex_gettext.("Hang in there while we get back on track", @gettext) %>
-        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" />
       </.flash>
     </div>
     """
@@ -516,7 +516,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   ## Examples
 
       <.icon name="hero-x-mark-solid" />
-      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 motion-safe:animate-spin" />
   """
   attr :name, :string, required: true
   attr :class, :string, default: nil