diff --git a/plugins/lime-plugin-firmware/firmware.spec.js b/plugins/lime-plugin-firmware/firmware.spec.js
index fd7f6fbb..4d625aae 100644
--- a/plugins/lime-plugin-firmware/firmware.spec.js
+++ b/plugins/lime-plugin-firmware/firmware.spec.js
@@ -197,9 +197,11 @@ describe('firmware form', () => {
version: 'SomeNewVersionName'
}));
render()
+ downloadRelease.mockImplementation(() =>
+ new Promise(res => setTimeout(res, 10))); // let loading enter screen
const downloadButton = await screen.findByRole('button', {name: /Download/i})
fireEvent.click(downloadButton);
- stepSubmit();
+ expect(await screen.findByLabelText('loading')).toBeInTheDocument();
await waitForExpect(() => {
expect(downloadRelease).toHaveBeenCalled();
})
@@ -252,9 +254,11 @@ describe('firmware form', () => {
.mockImplementation(async () => (
{ download_status: 'downloaded', fw_path: '/tmp/upgrade.sh' }
));
+ upgradeFirmware.mockImplementation(() => new Promise(res => setTimeout(res, 10)));
render()
const upgradeButton = await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i});
fireEvent.click(upgradeButton);
+ expect(await screen.findByLabelText('loading')).toBeInTheDocument();
expect(upgradeFirmware).toHaveBeenCalledWith('/tmp/upgrade.sh');
});
diff --git a/plugins/lime-plugin-firmware/src/firmwareQueries.js b/plugins/lime-plugin-firmware/src/firmwareQueries.js
index f1a3f33d..18784eaa 100644
--- a/plugins/lime-plugin-firmware/src/firmwareQueries.js
+++ b/plugins/lime-plugin-firmware/src/firmwareQueries.js
@@ -1,7 +1,8 @@
import { useQuery, useMutation } from 'react-query';
import queryCache from 'utils/queryCache';
import { getUpgradeInfo, getNewVersion, getDownloadStatus,
- upgradeConfirm, upgradeRevert, downloadRelease} from './firmwareApi'
+ upgradeConfirm, upgradeRevert, downloadRelease,
+ upgradeFirmware } from './firmwareApi'
export function useUpgradeInfo() {
return useQuery(["lime-utils", "get_upgrade_info"], getUpgradeInfo, {});
@@ -41,3 +42,7 @@ export function useDownloadRelease() {
)}
)
}
+
+export function useUpgradeFirwmare() {
+ return useMutation(upgradeFirmware);
+}
diff --git a/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js
index 4fafcebd..668c2d89 100644
--- a/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js
+++ b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js
@@ -7,7 +7,8 @@ import { useState, useEffect } from 'preact/hooks';
import { useForm } from 'react-hook-form';
import Loading from 'components/loading';
import { uploadFile, upgradeFirmware } from '../firmwareApi';
-import { useUpgradeInfo, useDownloadRelease, useDownloadStatus, useNewVersion} from '../firmwareQueries';
+import { useUpgradeInfo, useDownloadRelease, useDownloadStatus,
+ useNewVersion, useUpgradeFirwmare} from '../firmwareQueries';
export const SafeUpgradeBadge = () => {
const { isLoading, data: upgradeInfo} = useUpgradeInfo();
@@ -48,7 +49,8 @@ const UpgradeFromRelease = ({onUpgrading, onSwitch}) => {
}
});
- const [downloadRelease] = useDownloadRelease();
+ const [downloadRelease, { isLoading: submittingDownload }] = useDownloadRelease();
+ const [upgradeFirmware, { isLoading: submittingUpgrade }] = useUpgradeFirwmare();
const filePath = downloadStatus && downloadStatus.fw_path;
const status = downloadStatus && downloadStatus.download_status;
@@ -70,6 +72,9 @@ const UpgradeFromRelease = ({onUpgrading, onSwitch}) => {
{status === 'not-initiated' &&
}
+ {(submittingDownload || submittingUpgrade) &&
+
+ }
{status === 'downloading' &&
Downloading
diff --git a/src/components/loading/index.js b/src/components/loading/index.js
index a08c0fed..ef7c1bc9 100644
--- a/src/components/loading/index.js
+++ b/src/components/loading/index.js
@@ -3,7 +3,7 @@ import { h } from 'preact';
import style from './style.less';
export const Loading = ({ color }) => {
- const styleOverride = color ? { 'backgroundColor': color } : '';
+ const styleOverride = color ? { backgroundColor: color } : '';
return (