Static hourglass indicator when reduced motion is preferred (#18847)

The rotating spinner is replaced by a static hourglass icon.

frontend/src/metabase/components/LoadingSpinner/LoadingSpinner.jsx

 import React from "react";
 import PropTypes from "prop-types";
+
+import { isReducedMotionPreferred } from "metabase/lib/dom";
+
+import Icon from "metabase/components/Icon";
 import { SpinnerIcon, SpinnerRoot } from "./LoadingSpinner.styled";
 
 const propTypes = {
@@ -10,7 +14,11 @@ const propTypes = {
 
 const LoadingSpinner = ({ className, size = 32, borderWidth = 4 }) => (
   <SpinnerRoot className={className} data-testid="loading-spinner">
-    <SpinnerIcon iconSize={size} borderWidth={borderWidth} />
+    {isReducedMotionPreferred() ? (
+      <Icon name="hourglass" size="24" />
+    ) : (
+      <SpinnerIcon iconSize={size} borderWidth={borderWidth} />
+    )}
   </SpinnerRoot>
 );
 

frontend/src/metabase/components/LoadingSpinner/LoadingSpinner.styled.jsx

@@ -40,8 +40,4 @@ export const SpinnerIcon = styled.div`
     top: ${props => `-${props.borderWidth}px`};
     left: ${props => `-${props.borderWidth}px`};
   }
-
-  @media (prefers-reduced-motion) {
-    animation: none;
-  }
 `;

frontend/src/metabase/icon_paths.ts

@@ -238,6 +238,14 @@ export const ICON_PATHS: Record<string, any> = {
       viewBox: "0 0 36 33",
     },
   },
+  hourglass: {
+    path:
+      "M3 1.838C3 .823 3.617 0 4.378 0H27.35c.761 0 1.379.823 1.379 1.838 0 1.015-.618 1.837-1.379 1.837h-.143a28.303 28.303 0 0 1-.25 3.17c-.237 1.641-.695 3.295-1.654 4.574-1.157 1.543-2.537 2.456-3.52 3.108h-.001l-.214.142c-.53.354-.839.58-1.028.783-.138.15-.138.205-.137.24v.005c0 .009-.002.014-.003.018v.002l-.002.003c0 .008.008.016.052.058l.002.002c.14.134.32.254.664.481l.403.269c1.154.776 2.72 1.971 4.291 4.563.764 1.26 1.212 3.171 1.41 4.777a15.138 15.138 0 0 1 .119 2.455h.011c.761 0 1.379.822 1.379 1.837 0 1.015-.618 1.838-1.379 1.838H4.38C3.616 32 3 31.177 3 30.162c0-1.015.617-1.837 1.378-1.837h.012a15.146 15.146 0 0 1 .118-2.454c.199-1.607.647-3.519 1.41-4.778 1.57-2.591 3.137-3.787 4.292-4.563.155-.105.288-.193.403-.269.343-.227.524-.347.664-.481l.002-.002c.043-.042.052-.05.051-.058l-.001-.005c-.001-.004-.003-.01-.003-.018v-.005c0-.035.001-.09-.138-.24-.189-.204-.497-.43-1.028-.783l-.214-.142c-.984-.652-2.364-1.565-3.52-3.107-.96-1.28-1.418-2.934-1.655-4.575a28.31 28.31 0 0 1-.25-3.17h-.143C3.618 3.675 3 2.853 3 1.838zm4.28 1.837h17.168c-.03.973-.094 1.908-.22 2.775-.212 1.468-.58 2.582-1.131 3.316-.862 1.15-1.88 1.825-2.881 2.491l-.178.118c-.494.33-1.075.724-1.52 1.203-.487.526-.873 1.218-.873 2.119 0 .898.367 1.561.894 2.069.34.327.804.632 1.193.888l.248.163c.93.626 2.167 1.551 3.472 3.705.457.753.847 2.196 1.032 3.687.09.72.123 1.387.104 1.907a6.013 6.013 0 0 1-.011.209H7.15a6.192 6.192 0 0 1-.011-.21c-.019-.52.014-1.186.103-1.906.185-1.49.576-2.934 1.032-3.687 1.305-2.154 2.543-3.08 3.473-3.705.077-.052.16-.106.248-.163.388-.256.853-.561 1.192-.888.527-.508.894-1.17.894-2.07 0-.9-.385-1.592-.873-2.118-.444-.48-1.026-.874-1.52-1.203l-.177-.118c-1.002-.666-2.019-1.342-2.881-2.491-.55-.734-.92-1.848-1.132-3.316a25.21 25.21 0 0 1-.22-2.775zm2.152 3.682h12.421c0 2.948-6.132 6.04-6.132 6.04s-6.29-3.38-6.29-6.04zm-.919 19.59h14.702c0-.7-.744-1.323-1.764-1.848-3.56-1.834-8.014-1.823-11.48.182-.856.495-1.458 1.059-1.458 1.665zm7.35-5.17a1.378 1.378 0 1 0 0-2.757 1.378 1.378 0 0 0 0 2.757z",
+    attrs: {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+    },
+  },
   info:
     "M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6",
   info_outline: