Added data download ability

frontend/src/components/loading-button/loading-button.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+
+export interface LoadingButtonProps {
+    className?: string;
+    progress: number | null;
+    onClick: () => any;
+    title?: string;
+}
+
+export const LoadingButton: React.FC<LoadingButtonProps> = ({ className = '', onClick, progress, title = "Click me" }) => {
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (progress && progress >= 100) {
+            setLoading(false);
+        }
+    }, [progress])
+
+    const handleClick = () => {
+        setLoading(true);
+        onClick();
+    };
+
+    return (
+        <div className="relative">
+            <button
+                className={`relative bg-blue-500 hover:bg-blue-700 w-full text-white font-bold py-2 px-4 rounded-full transition-transform duration-200 transform hover:-translate-y-1 hover:scale-105 ${loading ? "cursor-not-allowed" : ""
+                    }`}
+                onClick={handleClick}
+                disabled={loading}
+                style={{
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis",
+                    overflow: "hidden", display: 'inline-block', border: '0px solid black'
+                }}
+            >
+                <span className={`text-center z-10 ${loading ? "opacity-50" : ""}`}>
+                    {loading ? `${progress}%` : `${title}`}
+                </span>
+                <div
+                    className={`absolute h-full transition-width duration-500`}
+                    style={{
+                        width: `${progress}%`,
+                        backgroundColor: "blue",
+                        top: 0,
+                        left: 0,
+                        zIndex: "-1"
+                    }}
+                ></div>
+            </button>
+        </div>
+    );
+};
+