Add global loading indicator when fetching

pbteja1998 · pbteja1998 · commit c74086dddd6a · 2021-02-28T10:44:49.000+05:30
diff --git a/src/components/AppNavBar.tsx b/src/components/AppNavBar.tsx
@@ -1,6 +1,6 @@
 import { NavBar, Button, Menu, Avatar } from '@/ui'
 import { signIn, signOut, useSession } from 'next-auth/client'
-import { Logo, DonateModal } from '@/components'
+import { Logo, DonateModal, GlobalLoadingIndicator } from '@/components'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { User } from 'src/pages/members'
@@ -72,6 +72,7 @@ export default function AppNavBar() {
       }
       rightDesktopItems={
         <>
+          <GlobalLoadingIndicator />
           <DonateModal
             isOpen={isDonateModalOpen}
             setIsOpen={setIsDonateModalOpen}
diff --git a/src/components/GlobalLoadingIndicator.tsx b/src/components/GlobalLoadingIndicator.tsx
@@ -0,0 +1,32 @@
+import { useIsFetching } from 'react-query'
+
+export default function GlobalLoadingIndicator() {
+  const isFetching = useIsFetching()
+
+  if (!isFetching) {
+    return null
+  }
+
+  return (
+    <svg
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-brand-600"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -13,3 +13,4 @@ export { default as Hero } from './Hero'
 export * from './modal'
 export { Pre } from './Code'
 export { useLikes } from './useLikes'
+export { default as GlobalLoadingIndicator } from './GlobalLoadingIndicator'
