Merge pull request from bittu9975/fix/separate-loading-buttons

fix(frontend): Separate loading states for compress/decompress buttons

Author: subha0319

frontend/src/App.js

@@ -12,7 +12,8 @@ function App() {
   // State for results and UI feedback
   const [result, setResult] = useState(null);
   const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [isCompressing, setIsCompressing] = useState(false);
+  const [isDecompressing, setIsDecompressing] = useState(false);
 
   // API endpoint base URL for local development
   //const API_URL = 'http://localhost:8080/api';
@@ -28,7 +29,10 @@ function App() {
       setError('Please enter text to compress.');
       return;
     }
-    setLoading(true);
+
+    if (isDecompressing) return;
+
+    setIsCompressing(true);
     setError('');
     setResult(null);
 
@@ -71,7 +75,7 @@ function App() {
       setError('Failed to compress text. Make sure the backend server is running.');
       console.error(e);
     } finally {
-      setLoading(false);
+      setIsCompressing(false);
     }
   };
 
@@ -85,14 +89,16 @@ function App() {
       return;
     }
 
+    if (isCompressing) return;
+
     try {
       parsedCodeTable = JSON.parse(codeTableInput);
     } catch (e) {
       setError('Invalid JSON in the code table. Please check the format.');
       return;
     }
 
-    setLoading(true);
+    setIsDecompressing(true);
     setError('');
     setResult(null);
 
@@ -122,7 +128,7 @@ function App() {
       setError('Failed to decompress text. Make sure the backend server is running and the inputs are correct.');
       console.error(e);
     } finally {
-      setLoading(false);
+      setIsDecompressing(false);
     }
   };
 
@@ -146,8 +152,8 @@ function App() {
               placeholder="Type your text here..."
               rows="8"
             />
-            <button className="btn" onClick={handleCompress} disabled={loading}>
-              {loading ? 'Compressing...' : 'Compress'}
+            <button className="btn" onClick={handleCompress} disabled={isCompressing || isDecompressing}>
+              {isCompressing ? 'Compressing...' : 'Compress'}
             </button>
           </div>
 
@@ -169,8 +175,8 @@ function App() {
               placeholder='Code table in JSON format (e.g., {"a": "01", "b": "10"})'
               rows="4"
             />
-            <button className="btn" onClick={handleDecompress} disabled={loading}>
-              {loading ? 'Decompressing...' : 'Decompress'}
+            <button className="btn" onClick={handleDecompress} disabled={isCompressing || isDecompressing}>
+              {isDecompressing ? 'Decompressing...' : 'Decompress'}
             </button>
           </div>
         </div>