Cleanup logic for asModal to make it a little easier to use dynamically

resources/scripts/components/elements/Spinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import styled, { css, keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
@@ -10,6 +10,11 @@ interface Props {
     isBlue?: boolean;
 }
 
+interface Spinner extends React.FC<Props> {
+    Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
+    Suspense: React.FC<Props>;
+}
+
 const spin = keyframes`
     to { transform: rotate(360deg); }
 `;
@@ -30,7 +35,7 @@ const SpinnerComponent = styled.div<Props>`
     border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
 `;
 
-const Spinner = ({ centered, ...props }: Props) => (
+const Spinner: Spinner = ({ centered, ...props }) => (
     centered ?
         <div
             css={[
@@ -43,12 +48,19 @@ const Spinner = ({ centered, ...props }: Props) => (
         :
         <SpinnerComponent {...props}/>
 );
-Spinner.DisplayName = 'Spinner';
+Spinner.displayName = 'Spinner';
 
 Spinner.Size = {
-    SMALL: 'small' as SpinnerSize,
-    BASE: 'base' as SpinnerSize,
-    LARGE: 'large' as SpinnerSize,
+    SMALL: 'small',
+    BASE: 'base',
+    LARGE: 'large',
 };
 
+Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
+    <Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
+        {children}
+    </Suspense>
+);
+Spinner.Suspense.displayName = 'Spinner.Suspense';
+
 export default Spinner;