NCD-660: Toggle disable flag on component instead of only style

NordicSemiconductor · Jan 31, 2024 · ce51941 · ce51941
1 parent 65f7c11
commit ce51941
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/src/SidePanel.tsx b/src/SidePanel.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import { useSelector } from 'react-redux';
 import {
     Button,
@@ -21,19 +21,22 @@ import { getConfigArray } from './features/Configuration/boardControllerConfigSl
 export default () => {
     logger.debug('Rendering SidePanel');
 
+    const [isWriting, setWriting] = useState<boolean>(false)
+
     const device = useSelector(selectedDevice);
     const configData = useSelector(getConfigArray);
 
     return (
         <SidePanel className="side-panel">
             <CollapsibleGroup defaultCollapsed={false} heading="Actions">
                 <Button
-                    disabled={!device}
+                    disabled={!device || isWriting}
                     variant="primary"
                     className="tw-w-full"
                     onClick={async event => {
                         const button = event.currentTarget;
-                        button.classList.add('disabled');
+                        // Set isWriting flag for user ui feedback
+                        setWriting(true);
                         if (!device) {
                             return;
                         }
@@ -42,7 +45,8 @@ export default () => {
                             configData
                         );
                         logger.info('Configuration written');
-                        button.classList.remove('disabled');
+                        // Clear isWriting flag for user ui feedback
+                        setWriting(false);
                     }}
                 >
                     Write config