feat: add skeleton masthead and generic loading page (#182)

* feat: add skeleton masthead and generic loading page

* add generic loader to picker page

* smooth out spinner, add no-motion state

packages/design-system/atoms/placeholder/Placeholder.tsx

@@ -0,0 +1,55 @@
+import styled, { css, keyframes } from 'styled-components';
+import { palette } from '../colors';
+
+export const fadeInOut = keyframes`
+  from {
+    background-color: var(--placeholder-first-color);
+  } 
+  to {
+    background-color: var(--placeholder-second-color);
+  }
+`;
+
+export const animateFade = (firstColor?: string, secondColor?: string) => css`
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInOut} 2s ease-in-out infinite alternate;
+  }
+
+  --placeholder-first-color: ${firstColor};
+  --placeholder-second-color: ${secondColor};
+`;
+
+type PlaceholderProps = {
+  forceReduceMotion?: boolean;
+  firstColor?: string;
+  secondColor?: string;
+};
+
+export const PlaceholderBox = styled.div<PlaceholderProps>`
+  width: 7em;
+  height: 1em;
+  background-color: ${(props) => props.firstColor || palette.taupe200};
+  display: inline-block;
+  border-radius: 2px;
+  position: relative;
+  top: 0.2em;
+  ${(props) =>
+    props.secondColor &&
+    !props.forceReduceMotion &&
+    animateFade(props.firstColor, props.secondColor)}
+`;
+
+export const opacityInOut = keyframes`
+  from {
+    opacity: 0.6;
+  } 
+  to {
+    opacity: 0.3;
+  }
+`;
+
+export const animateOpacity = css`
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${opacityInOut} 5s ease-in-out infinite alternate;
+  }
+`;