Add ActionButtonItem

src/components/actionButtonItem.tsx

@@ -0,0 +1,43 @@
+import { ButtonItem, ButtonItemProps, Spinner } from "decky-frontend-lib";
+import { FC, useState } from "react";
+
+export interface ActionButtonItemProps extends ButtonItemProps {
+  loading?: boolean;
+  debugLabel?: string;
+}
+
+export const ActionButtonItem: FC<ActionButtonItemProps> = (props) => {
+  const { onClick, disabled, children, loading, layout, debugLabel } = props;
+
+  const [_loading, setLoading] = useState(loading);
+
+  const handClick = async (event: MouseEvent, onClick?: (e: MouseEvent) => void) => {
+    try {
+      console.log(`ActionButtonItem: ${debugLabel}`);
+      setLoading(true);
+      await onClick?.(event);
+      console.log(`ActionButtonItem: ${debugLabel} done`);
+    } catch (e) {
+      console.error(`ActionButtonItem error: ${e}`);
+    } finally {
+      // console.log(`ActionButtonItem: ${debugLabel} disable loading`);
+      setLoading(false);
+    }
+  }
+
+  const isLoading = _loading;
+
+  return (
+    <ButtonItem
+      {...props}
+      layout={layout ?? "below"}
+      disabled={isLoading || disabled}
+      onClick={(e) => handClick(e, onClick)}
+
+    >
+      <span style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} >
+        {children} {isLoading && <Spinner style={{ margin: '0px 8px', width: '1.1em' }} />}
+      </span>
+    </ButtonItem>
+  );
+}

src/components/index.ts

@@ -6,4 +6,5 @@ export * from "./fan"
 export * from "./fanCanvas"
 export * from "./more"
 export * from "./customTDP"
+export * from "./actionButtonItem"
 

src/components/more.tsx

@@ -2,6 +2,7 @@ import { ButtonItem, Field, PanelSection, PanelSectionRow } from "decky-frontend
 import { VFC, useEffect, useState } from "react";
 import { localizationManager, localizeStrEnum } from "../i18n";
 import { Backend, Settings } from "../util";
+import { ActionButtonItem } from ".";
 
 export const MoreComponent: VFC = () => {
     const [currentVersion, _] = useState<string>(Backend.data.getCurrentVersion());
@@ -25,12 +26,12 @@ export const MoreComponent: VFC = () => {
     return (
         <PanelSection title={localizationManager.getString(localizeStrEnum.MORE)}>
             <PanelSectionRow>
-                <ButtonItem
+                <ActionButtonItem
                     layout="below"
                     onClick={() => {
                         Backend.updateLatest();
                     }}
-                >{uptButtonText}</ButtonItem>
+                >{uptButtonText}</ActionButtonItem>
             </PanelSectionRow>
             <PanelSectionRow>
                 <ButtonItem