From 593e5c1e5572ad8f62241d5827ab1e0edf86d9fc Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Thu, 26 Jan 2023 11:59:11 +0530
Subject: [PATCH] feat: add loading state for better ux

---
 src/components/ComponentToImg.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 3d3959c..38f90e1 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 // import { exportComponentAsPNG } from "react-component-export-image";
 import "./CoverImage.css";
 import { ImgContext } from "../utils/ImgContext";
@@ -7,6 +7,8 @@ import domtoimage from "dom-to-image";
 
 const ComponentToImg = (props) => {
 
+	const [loading, setLoading] = useState(false)
+
 	const { unsplashImage } = useContext(ImgContext);
 	const componentRef = React.createRef();
 
@@ -18,12 +20,15 @@ const ComponentToImg = (props) => {
 		a.href = data;
 		a.download = `cover.png`;
 		document.body.appendChild(a);
+		setLoading(false)
+
 		a.click();
 		document.body.removeChild(a);
 	}
 
 	const downloadImage = async () => {
 		// exportComponentAsPNG(componentRef, 'cover')
+		setLoading(true)
 
 		const element = componentRef.current;
 
@@ -57,7 +62,17 @@ const ComponentToImg = (props) => {
 			<button
 				className="border p-2 bg-gray-700 hover:bg-gray-800 flex items-center text-white text-xl rounded-lg m-4 px-4"
 				onClick={() => downloadImage()}>
-				<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+
+
+				<span>
+					{
+						loading ?
+							<svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-white animate animate-spin" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" ><path d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"></path></svg>
+							:
+							<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+					}
+				</span>
+
 				<span className="mx-2">Download</span>
 			</button>
 		</React.Fragment>