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/loading-text/Loading.stories.tsx

@@ -0,0 +1,12 @@
+import { Hero } from '@roleypoly/design-system/atoms/hero';
+import { LoadingFill } from './Loading';
+export default {
+  title: 'Atoms/Loading Text',
+  component: LoadingFill,
+};
+
+export const loading = (args) => (
+  <Hero>
+    <LoadingFill {...args} />
+  </Hero>
+);

packages/design-system/atoms/loading-text/Loading.tsx

@@ -0,0 +1,30 @@
+const loadingTexts = [
+  'Loading Roleypoly...',
+  'Reticulating splines...',
+  'Mining cryptocoins...',
+  'Going to Mars...',
+  'Building the Box Signature Edition...',
+  'Hiring a new CEO...',
+  'Firing the new CEO...',
+  'Doing a calculation...',
+  'Doin a fixy boi...',
+  'Feeling like a plastic bag...',
+  'Levelling up...',
+  'Your Roleypoly is evolving!!!',
+  'Adding subtitles...',
+  'Rolling... Rolling...',
+];
+
+export const LoadingFill = (props: { forceIndex?: keyof typeof loadingTexts }) => {
+  const useEasterEgg = Math.floor(Math.random() * 10) === 0;
+  const index =
+    props.forceIndex !== undefined
+      ? props.forceIndex
+      : useEasterEgg
+      ? Math.floor(Math.random() * loadingTexts.length)
+      : 0;
+
+  const text = loadingTexts[index];
+
+  return <>{text}</>;
+};

packages/design-system/atoms/loading-text/index.ts

@@ -0,0 +1 @@
+export * from './Loading';