Add loading spinner while feed loads

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>
+  )
+}

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>