Merge pull request #49 from VipinVIP/button-improve

Added loading animation buttons
anandbaburajan · Jan 30, 2021 · b04b8b8 · b04b8b8 · vercel · Jan 30, 2021
2 parents 99e77b6 + 5a2ccc5
commit b04b8b8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/pages/poll/create.tsx b/pages/poll/create.tsx
@@ -8,6 +8,7 @@ import {
   Container,
   Jumbotron,
   Button,
+  Spinner,
   OverlayTrigger,
   Tooltip,
 } from "react-bootstrap";
@@ -152,7 +153,14 @@ const Create = (): JSX.Element => {
                   disabled
                 }
               >
-                Create Poll
+                {!disabled ? (
+                  `Create Poll`
+                ) : (
+                  <>
+                    <Spinner as="span" animation="grow" size="sm" />
+                    &nbsp;Loading...
+                  </>
+                )}
               </Button>
               <ResponseMessage
                 response={response}

diff --git a/src/components/SubmitChoices.tsx b/src/components/SubmitChoices.tsx
@@ -1,4 +1,4 @@
-import { Button } from "react-bootstrap";
+import { Button, Spinner } from "react-bootstrap";
 import { useState } from "react";
 import Router from "next/router";
 import { serverAPI } from "../api/server";
@@ -47,7 +47,14 @@ const SubmitChoices = (props: {
         disabled={!newVote.name || newVote.choices.length === 0 || disabled}
         onClick={handleSubmit}
       >
-        Mark your availability
+        {!disabled ? (
+          `Mark your availability`
+        ) : (
+          <>
+            <Spinner as="span" animation="grow" size="sm" />
+            &nbsp;Loading...
+          </>
+        )}
       </Button>
       <ResponseMessage
         response={response}

diff --git a/src/components/SubmitFinalChoice.tsx b/src/components/SubmitFinalChoice.tsx
@@ -1,4 +1,4 @@
-import { Button } from "react-bootstrap";
+import { Button, Spinner } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import Router from "next/router";
@@ -58,7 +58,14 @@ const SubmitFinalChoice = (props: {
         disabled={!finalChoice || disabled}
         onClick={handleSubmit}
       >
-        Mark final option
+        {!disabled ? (
+          `Mark final option`
+        ) : (
+          <>
+            <Spinner as="span" animation="grow" size="sm" />
+            &nbsp;Loading...
+          </>
+        )}
       </Button>
       <ResponseMessage
         response={response}