Add loading & LinearProgress to Koneksyon component

components/kont/koneksyon.js

@@ -9,6 +9,7 @@ import {
   Input,
   InputAdornment,
   InputLabel,
+  LinearProgress,
   Snackbar,
   Typography
 } from '@material-ui/core'
@@ -22,6 +23,7 @@ function Koneksyon() {
   const [loginError, setError] = useState('')
   const [credentials, setCredentials] = useState({username: '', password: ''})
   const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [open, setOpen] = useState(true)
   const router = useRouter()
 
@@ -30,13 +32,16 @@ function Koneksyon() {
   }
 
   const handleClick = async () => {
+    setLoading(true)
     const response = await signIn('credentials', {
       redirect: false,
       ...credentials
     })
     if (response.error) {
       setError(response.error)
+      setLoading(false)
     } else if (response.ok) {
+      setLoading(false)
       router.push('/kont')
     }
   }
@@ -101,7 +106,7 @@ function Koneksyon() {
 
       <Button
         fullWidth
-        disabled={!validateEmail(credentials.username) || credentials.password === ''}
+        disabled={loading || !validateEmail(credentials.username) || credentials.password === ''}
         style={{marginTop: 50}}
         variant='contained'
         color='primary'
@@ -112,6 +117,8 @@ function Koneksyon() {
         </Typography>
       </Button>
 
+      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
+
       {loginError && (
         <Snackbar
           open={open}