ui: add <Spinner>

ui/app/components/spinner.hbs

@@ -0,0 +1,18 @@
+{{!--
+
+Usage:
+
+    <Spinner />
+    <Spinner @size="16" />
+    <Spinner @size="20" />
+    <Spinner @size="24" />
+    <Spinner @size="24" class="some-other-class" />
+
+--}}
+
+<Pds::Icon
+  @type="loading"
+  class="spinner"
+  data-size={{or @size "inherit"}}
+  ...attributes
+/>

ui/app/styles/_variables.scss

@@ -37,6 +37,7 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
   --warning-border: #{dehex(color.$yellow-100)};
   --info: #{dehex(color.$blue-050)};
   --info-text: #{dehex(color.$blue-500)};
+  --spinner-stroke: #{dehex(color.$black)};
 }
 
 @media (prefers-color-scheme: dark) {
@@ -69,5 +70,6 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
     --pds-color: #{dehex(color.$white)};
     --pds-input-backgroundColor: #{dehex(color.$ui-cool-gray-900)};
     --pds-input-color: #{dehex(color.$white)};
+    --spinner-stroke: #{dehex(color.$white)};
   }
 }

ui/app/styles/app.scss

@@ -30,6 +30,7 @@
 @import './components/navigation/header';
 @import './components/icon-tile';
 @import './components/input';
+@import './components/spinner';
 @import './pages/login';
 @import './components/notifications';
 @import './pages/onboarding';

ui/app/styles/components/spinner.scss

@@ -0,0 +1,25 @@
+.spinner {
+  position: relative;
+
+  top: 1px;
+
+  svg {
+    fill: none !important;
+  }
+  svg,
+  g {
+    stroke: rgb(var(--spinner-stroke));
+  }
+  &[data-size='inherit'] {
+    font-size: inherit;
+  }
+  &[data-size='16'] {
+    font-size: 16px;
+  }
+  &[data-size='20'] {
+    font-size: 20px;
+  }
+  &[data-size='24'] {
+    font-size: 24px;
+  }
+}