From 587e1e5d6185d2ef72bd183b98f734865ec589f1 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Thu, 3 Feb 2022 17:12:09 -0600
Subject: [PATCH] Add loading spinner while feed loads

---
 web/components/loading-indicator.tsx | 16 ++++++++++++++++
 web/pages/home.tsx                   |  5 ++++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 web/components/loading-indicator.tsx

diff --git a/web/components/loading-indicator.tsx b/web/components/loading-indicator.tsx
new file mode 100644
index 00000000..0cfa01af
--- /dev/null
+++ b/web/components/loading-indicator.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+
+export function LoadingIndicator(props: { className?: string }) {
+  const { className } = props
+
+  return (
+    <div className={clsx('flex justify-center items-center', className)}>
+      <div
+        className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-indigo-500"
+        role="status"
+      >
+        <span className="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  )
+}
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 61d785e4..187706d2 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -16,6 +16,7 @@ import { getFollowedFolds, listAllFolds } from '../lib/firebase/folds'
 import { Fold } from '../../common/fold'
 import { filterDefined } from '../../common/util/array'
 import { useUserBets } from '../hooks/use-user-bets'
+import { LoadingIndicator } from '../components/loading-indicator'
 
 export async function getStaticProps() {
   const [contracts, folds] = await Promise.all([
@@ -136,7 +137,9 @@ const Home = (props: { contracts: Contract[]; folds: Fold[] }) => {
               contractBets={contractBets}
               contractComments={contractComments}
             />
-          ) : null}
+          ) : (
+            <LoadingIndicator className="mt-4" />
+          )}
         </Col>
       </Col>
     </Page>