From 6dc4dcb2e57a729989e87a6b81052396d4d155d0 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Tue, 21 Dec 2021 18:44:38 -0600
Subject: [PATCH] toolbar: specify image width/height

This make the button the right size while waiting for the image to download.

Fixes: https://github.com/pybricks/support/issues/369
---
 CHANGELOG.md                   |  5 +++++
 src/toolbar/ActionButton.tsx   | 11 ++++++++++-
 src/toolbar/OpenFileButton.tsx |  4 +++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 935926ed..850558b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 ## [Unreleased]
 
+### Fixed
+- Fixed buttons wrong size while image is downloading ([support#369]).
+
+[support#369]: https://github.com/pybricks/support/issues/369
+
 ## [1.1.0] - 2021-12-16
 
 ### Changed
diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx
index e6a75bca..58c7f709 100644
--- a/src/toolbar/ActionButton.tsx
+++ b/src/toolbar/ActionButton.tsx
@@ -1,7 +1,14 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { Button, IRef, Intent, Spinner, useHotkeys } from '@blueprintjs/core';
+import {
+    Button,
+    IRef,
+    Intent,
+    Spinner,
+    SpinnerSize,
+    useHotkeys,
+} from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useMemo } from 'react';
@@ -93,6 +100,8 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
                         <Spinner value={props.progress} intent={Intent.PRIMARY} />
                     ) : (
                         <img
+                            width={`${SpinnerSize.STANDARD}px`}
+                            height={`${SpinnerSize.STANDARD}px`}
                             src={props.icon}
                             alt={props.id}
                             style={{ pointerEvents: 'none' }}
diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx
index a7108d73..f3c2fe9d 100644
--- a/src/toolbar/OpenFileButton.tsx
+++ b/src/toolbar/OpenFileButton.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { Button, IRef, Intent, Spinner } from '@blueprintjs/core';
+import { Button, IRef, Intent, Spinner, SpinnerSize } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React from 'react';
@@ -116,6 +116,8 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                         <Spinner value={props.progress} intent={Intent.PRIMARY} />
                     ) : (
                         <img
+                            width={`${SpinnerSize.STANDARD}px`}
+                            height={`${SpinnerSize.STANDARD}px`}
                             src={props.icon}
                             alt={props.id}
                             style={{ pointerEvents: 'none' }}