Added Preloaders ⭕

Author: tsaxena4k

components/AfterLogin.jsx

@@ -1,11 +1,13 @@
-import React,{useState} from 'react';
+import React, { useState } from 'react';
 import { useUser } from '../lib/hooks';
 
 export default function afterLogin() {
     const [errorMsg, setErrorMsg] = useState("");
-    const [user]=useUser();
+    const [user] = useUser();
+    const [Loader,updateLoad]=useState(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
+        updateLoad(true);
         const body = {
             message: e.currentTarget.message.value,
             name: user.name
@@ -16,16 +18,17 @@ export default function afterLogin() {
             body: JSON.stringify(body)
         });
         if (res.status === 201) {
-            M.toast({html: 'Message sent',classes:'green'})
+            M.toast({ html: 'Message sent', classes: 'green' })
         } else {
             setErrorMsg(await res.text());
         }
+        updateLoad(false);
     };
     return (<div className="row">
         <div className="col s12 m12">
             <div className="card-panel horizontal blue ">
-                <span className="white-text">Hey you made it here {user?user.name:'Stranger'}, we all were waiting for you.<br/>I hope you like this Authentication module, Its simple yet important to know. 
-                I'll be updating it with many new stuff frequently.<br/><br/>Till then you can look around.<strong> Don't forget to drop a message for me.</strong></span>
+                <span className="white-text">Hey you made it here {user ? user.name : 'Stranger'}, we all were waiting for you.<br />I hope you like this Authentication module, Its simple yet important to know.
+                I'll be updating it with many new stuff frequently.<br /><br />Till then you can look around.<strong> Don't forget to drop a message for me.</strong></span>
             </div>
         </div>
         {errorMsg ? (
@@ -38,7 +41,19 @@ export default function afterLogin() {
                 <label htmlFor="message">Message for developer</label>
             </div>
             <button className="btn-small waves-effect waves-light blue" type="submit" style={{ marginTop: '1.7rem' }}>Send
-    <i className="material-icons right">send</i>
+            {!Loader?<i className="material-icons right">send</i>:
+            <div class="preloader-wrapper small active">
+                    <div class="spinner-layer spinner-green-only">
+                        <div class="circle-clipper left">
+                            <div class="circle"></div>
+                        </div><div class="gap-patch">
+                            <div class="circle"></div>
+                        </div><div class="circle-clipper right">
+                            <div class="circle"></div>
+                        </div>
+                    </div>
+                </div>
+        }
             </button>
         </form>
     </div>)

pages/api/message.js

@@ -10,7 +10,7 @@ handler.post(async (req, res) => {
   const { message,name } = req.body;
   const msg = await req.db
     .collection('messages')
-    .insertOne({ name,message })
+    .insertOne({ name,message,message_date:new Date()})
     .then(({ ops }) => ops[0]);
   res.status(201).end();   
 });

style.scss

@@ -48,4 +48,13 @@ a{
     top:4.7rem !important;
     border-radius: 10px !important;
     height: 20rem !important;
+}
+.preloader-wrapper.small{
+    width: 20px;
+    height: 20px;
+    margin-left: 10px;
+    margin-bottom: -3px;
+    .spinner-green, .spinner-green-only{
+        border-color: #fff;
+    }
 }