fix: revive --theia-icon-loading in IDE2

 - it has been removed from Theia
 - aligned the DOM structure to previous the version when using widget

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -67,15 +67,17 @@ export class UploadFirmwareDialog extends ReactDialog<void> {
 
   protected override render(): React.ReactNode {
     return (
-      <form>
-        <FirmwareUploaderComponent
-          availableBoards={this.availableBoards}
-          firmwareUploader={this.arduinoFirmwareUploader}
-          flashFirmware={this.flashFirmware.bind(this)}
-          updatableFqbns={this.updatableFqbns}
-          isOpen={this.isOpen}
-        />
-      </form>
+      <div>
+        <form>
+          <FirmwareUploaderComponent
+            availableBoards={this.availableBoards}
+            firmwareUploader={this.arduinoFirmwareUploader}
+            flashFirmware={this.flashFirmware.bind(this)}
+            updatableFqbns={this.updatableFqbns}
+            isOpen={this.isOpen}
+          />
+        </form>
+      </div>
     );
   }
 
@@ -86,11 +88,6 @@ export class UploadFirmwareDialog extends ReactDialog<void> {
     this.update();
   }
 
-  protected override onUpdateRequest(msg: Message): void {
-    super.onUpdateRequest(msg);
-    this.update();
-  }
-
   // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
   protected override handleEnter(event: KeyboardEvent): boolean | void {
     return false;

Diff for: arduino-ide-extension/src/browser/icons/loading-dark.svg

@@ -20,6 +20,16 @@
 @import './progress-bar.css';
 @import './settings-step-input.css';
 
+/* Revive of the `--theia-icon-loading`. The variable has been removed from Theia while IDE2 still uses is. */
+/* The SVG icons are still part of Theia (1.31.1) */
+/* https://github.com/arduino/arduino-ide/pull/1662#issuecomment-1324997134 */
+body {
+  --theia-icon-loading: url(../icons/loading-light.svg);
+}
+body.theia-dark {
+  --theia-icon-loading: url(../icons/loading-dark.svg);
+}
+
 .theia-input.warning:focus {
   outline-width: 1px;
   outline-style: solid;