feat: Adds Loader component

ghoshnirmalya · Apr 11, 2020 · bac8009 · bac8009
1 parent eaf731e
commit bac8009
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/frontend/components/loader/index.tsx b/packages/frontend/components/loader/index.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from "react";
+import { Box, CircularProgress } from "@chakra-ui/core";
+
+const Loader: FC = () => {
+  return (
+    <Box w="full" textAlign="center" maxH="200px">
+      <CircularProgress
+        isIndeterminate
+        color="purple"
+        size="50px"
+        thickness={0.15}
+      />
+    </Box>
+  );
+};
+
+export default Loader;
diff --git a/packages/frontend/components/navbar/authenticated.tsx b/packages/frontend/components/navbar/authenticated.tsx
@@ -8,6 +8,7 @@ import gql from "graphql-tag";
 import { useQuery } from "react-apollo";
 import withApollo from "lib/with-apollo";
 import { cookieParser } from "lib/cookie";
+// import Loader from "components/loader";
 
 const FETCH_USER_QUERY = gql`
   query fetchUser($id: uuid!) {
@@ -31,7 +32,7 @@ const Navbar: NextComponentType = () => {
   });
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <Box />;
   }
 
   if (error) {

diff --git a/packages/frontend/components/pages/my-profile/index.tsx b/packages/frontend/components/pages/my-profile/index.tsx
@@ -16,6 +16,7 @@ import gql from "graphql-tag";
 import { useQuery, useMutation } from "react-apollo";
 import Link from "next/link";
 import { cookieParser } from "lib/cookie";
+import Loader from "components/loader";
 
 const FETCH_USER_QUERY = gql`
   query fetchUser($id: uuid!) {
@@ -72,7 +73,7 @@ const MyProfile: NextPage = () => {
   ] = useMutation(UPDATE_USER_MUTATION);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <Loader />;
   }
 
   if (error) {

diff --git a/packages/frontend/components/pages/users/index.tsx b/packages/frontend/components/pages/users/index.tsx
@@ -3,6 +3,7 @@ import { Box, Grid, Link as _Link, Heading, Text } from "@chakra-ui/core";
 import { NextPage } from "next";
 import gql from "graphql-tag";
 import { useQuery } from "react-apollo";
+import Loader from "components/loader";
 
 const FETCH_USER_QUERY = gql`
   query fetchUser {
@@ -19,7 +20,7 @@ const Users: NextPage = () => {
   const { data, loading, error } = useQuery(FETCH_USER_QUERY);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <Loader />;
   }
 
   if (error) {