Description:
Current Behavior:
When an API call is initiated (e.g., clicking "Compress"), a single loading state is activated. This causes both the "Compress" and "Decompress" buttons to enter a disabled, loading state simultaneously (e.g., showing "Compressing..." and "Decompressing..."). The same issue occurs in reverse when clicking the "Decompress" button.
Expected Behavior:
- When the Compress button is clicked, only the Compress button should show a "Compressing..." state. The Decompress button should be disabled but its text should not change.
- When the Decompress button is clicked, only the Decompress button should show a "Decompressing..." state. The Compress button should be disabled but its text should not change.
Root Cause:
The application currently uses a single, shared loading state variable in the App.js component to manage the loading status for both compression and decompression API calls.
Suggested Solution:
Refactor the state management to use separate loading state variables for each action. For example, instead of a single loading state, implement two distinct states:
isCompressingisDecompressing
Update the button components to conditionally render their text and disabled status based on these more specific states.
Screenshot of the Issue:
Description:
Current Behavior:
When an API call is initiated (e.g., clicking "Compress"), a single
loadingstate is activated. This causes both the "Compress" and "Decompress" buttons to enter a disabled, loading state simultaneously (e.g., showing "Compressing..." and "Decompressing..."). The same issue occurs in reverse when clicking the "Decompress" button.Expected Behavior:
Root Cause:
The application currently uses a single, shared
loadingstate variable in theApp.jscomponent to manage the loading status for both compression and decompression API calls.Suggested Solution:
Refactor the state management to use separate loading state variables for each action. For example, instead of a single
loadingstate, implement two distinct states:isCompressingisDecompressingUpdate the button components to conditionally render their text and disabled status based on these more specific states.
Screenshot of the Issue: