fix(firmware): display spinners in download from release

plugins/lime-plugin-firmware/firmware.spec.js

@@ -197,9 +197,11 @@ describe('firmware form', () => {
 			version: 'SomeNewVersionName'
 		}));
 		render(<FirmwarePage />)
+		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(<FirmwarePage />)
 		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');
 	});
 

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);
+}

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' &&
 				<button onClick={onDownload}><Trans>Download</Trans></button>
 			}
+			{(submittingDownload || submittingUpgrade) &&
+				<Loading />
+			}
 			{status === 'downloading' &&
 				<div>
 					<div class="withLoadingEllipsis"><Trans>Downloading</Trans></div>

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 (
 		<div className={style.spinner} aria-label="loading" data-testid="loading">
 			<div className={style.bounce1} style={styleOverride} />