From 54c2eab798d0b6e522df1ca140869f941a67e654 Mon Sep 17 00:00:00 2001
From: Oystein Steimler <oystein@nyvri.net>
Date: Wed, 31 Jan 2024 10:10:22 +0100
Subject: [PATCH] NCD-660: Toggle disable flag on component instead of only
 style

---
 src/SidePanel.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/SidePanel.tsx b/src/SidePanel.tsx
index 72830a2..eb08306 100644
--- 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,6 +21,8 @@ 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);
 
@@ -28,12 +30,13 @@ export default () => {
         <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