fix responsive issues and add loading state

Author: ZainAli104

.firebase/hosting.ZGlzdA.cache

@@ -1,7 +1,7 @@
-index.html,1688103362469,8b75454b05189ea5d540463bfc001d76a29c3b53839709ced384824c1427df4b
 vite.svg,1674978059710,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
-assets/download-74b78f19.png,1688103362469,ec437581e513f5015311a5c0e1480a3322ed9bd846ff4edb7fe0b50e3f4dca3d
-assets/preview-35b286f0.png,1688103362469,63f0a4f8898a72f68b5e6ff6436a8098e23485f9374b92ac99b41e82b5ba5903
-assets/index-eb9637c9.css,1688103362470,134fc779b3164cb837355b1eac94b9934b049e831cf6ecf2e717352174940f0f
-assets/Shouldirenovate Logo - Blue-19a85a31.png,1688103362470,92191206e7ac4341ef00fcb897148434c8d9e89a845eccbe6cb12b99431c8aa6
-assets/index-afb894c4.js,1688103362470,9c5a5fcd9585d3877436a1792f11fa532a87175bfd179463d900993e91c582c2
+index.html,1688378971753,9e310cea400ad03f188bf0b17855e36716c7bb7019dd6f06527703ad1c31d52e
+assets/download-74b78f19.png,1688378971753,ec437581e513f5015311a5c0e1480a3322ed9bd846ff4edb7fe0b50e3f4dca3d
+assets/index-eb9637c9.css,1688378971754,134fc779b3164cb837355b1eac94b9934b049e831cf6ecf2e717352174940f0f
+assets/preview-35b286f0.png,1688378971753,63f0a4f8898a72f68b5e6ff6436a8098e23485f9374b92ac99b41e82b5ba5903
+assets/Shouldirenovate Logo - Blue-19a85a31.png,1688378971753,92191206e7ac4341ef00fcb897148434c8d9e89a845eccbe6cb12b99431c8aa6
+assets/index-ff9a305f.js,1688378971754,7326dabd255e16d42b60cd9842339af447f36bdf07502d72c8f15330ca30da6c

src/page/ImageCrop.jsx

@@ -14,6 +14,7 @@ export default function App() {
   const [completedCrop, setCompletedCrop] = useState();
   const [scale, setScale] = useState(1);
   const [rotate, setRotate] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
 
   function onSelectFile(e) {
     if (e.target.files && e.target.files.length > 0) {
@@ -42,6 +43,7 @@ export default function App() {
   }
 
   function onDownloadCropClick() {
+    setIsLoading(true);
     if (!previewCanvasRef.current) {
       throw new Error("Crop canvas does not exist");
     }
@@ -58,6 +60,8 @@ export default function App() {
           hiddenAnchorRef.current.href = blobUrl;
           hiddenAnchorRef.current.download = "croped-image.png";
           hiddenAnchorRef.current.click();
+
+          setIsLoading(false);
         },
       });
     }, "image/png");
@@ -81,15 +85,15 @@ export default function App() {
   }, [completedCrop, scale, rotate]);
 
   return (
-    <section className="max-w-7xl mx-auto bg-gray-200 p-14 rounded-xl min-h-screen">
+    <section className="max-w-7xl mx-auto bg-gray-200 p-6 sm:p-14 rounded-xl min-h-screen">
       <div className="mb-6">
         <h1 className="font-extrabold text-[#222328] text-[32px]">
           Image Crop Tool
         </h1>
-        <p className="mt-2 text-[#666e75] text-[16px] max-w[500px]">
+        <p className="mt-2 text-[#666e75] text-[16px] max-w-[500px]">
           Select an image and crop it, then download the cropped version.
         </p>
-        <p className="mt-2 text-[#666e75] text-[16px] max-w[500px]">
+        <p className="mt-2 text-[#666e75] text-[16px] max-w-[500px]">
           Copyright © 2023 <span className="font-bold">ShouldiRenovate</span>.
           All rights reserved.
         </p>
@@ -101,7 +105,7 @@ export default function App() {
             type="file"
             accept="image/*"
             onChange={onSelectFile}
-            className="py-2 px-4 bg-blue-500 text-white rounded-md cursor-pointer"
+            className="py-2 px-4 bg-blue-500 text-white rounded-md cursor-pointer w-[101%] max-w-full lg:w-auto"
           />
         </div>
         {!!imgSrc && (
@@ -136,12 +140,18 @@ export default function App() {
               }}
             />
             <div className="mt-4">
-              <button
-                onClick={onDownloadCropClick}
-                className="py-2 px-4 bg-green-500 text-white rounded-md cursor-pointer"
-              >
-                Download Crop
-              </button>
+              {isLoading ? (
+                <button className="py-2 px-4 bg-green-500 text-white rounded-md cursor-pointer">
+                  Downloading...
+                </button>
+              ) : (
+                <button
+                  onClick={onDownloadCropClick}
+                  className="py-2 px-4 bg-green-500 text-white rounded-md cursor-pointer"
+                >
+                  Download Image
+                </button>
+              )}
               <a
                 ref={hiddenAnchorRef}
                 download