From cbdede75a76b92da2784adf1e19dc0b29cf07f4b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 22:38:34 -0700
Subject: [PATCH] Fix suspense spinner to make it indistinguishable from other
 loading

---
 resources/scripts/components/elements/Spinner.tsx     |  2 +-
 .../scripts/components/elements/SuspenseSpinner.tsx   | 11 ++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx
index 316062960..127ab6524 100644
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/resources/scripts/components/elements/Spinner.tsx
@@ -34,7 +34,7 @@ const Spinner = ({ centered, ...props }: Props) => (
     centered ?
         <div
             css={[
-                tw`flex justify-center`,
+                tw`flex justify-center items-center`,
                 props.size === 'large' ? tw`m-20` : tw`m-6`,
             ]}
         >
diff --git a/resources/scripts/components/elements/SuspenseSpinner.tsx b/resources/scripts/components/elements/SuspenseSpinner.tsx
index fca1e91b2..3e7098cad 100644
--- a/resources/scripts/components/elements/SuspenseSpinner.tsx
+++ b/resources/scripts/components/elements/SuspenseSpinner.tsx
@@ -1,15 +1,8 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
-import tw from 'twin.macro';
 
-const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
-    <Suspense
-        fallback={
-            <div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
-                <Spinner centered/>
-            </div>
-        }
-    >
+const SuspenseSpinner: React.FC = ({ children }) => (
+    <Suspense fallback={<Spinner size={'large'} centered/>}>
         {children}
     </Suspense>
 );