Workaround to avoiding button loading dom changes when doing in-context translations

Author: microbit-grace

src/components/ButtonWithLoading.tsx

@@ -0,0 +1,7 @@
+import { Button, ButtonProps } from "@chakra-ui/react"
+import { flags } from "../flags"
+
+// Workaround to avoid error caused by DOM changes when doing in-context translations.
+export const ButtonWithLoading = ({isLoading, ...props}: ButtonProps) => {
+    return <Button {...props} isLoading={isLoading && !flags.translate} disabled={isLoading}/>
+}

src/components/ConnectFirstDialog.tsx

@@ -4,21 +4,21 @@
  * SPDX-License-Identifier: MIT
  */
 import {
-  Button,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Text,
+  Text
 } from "@chakra-ui/react";
 import { ComponentProps, useCallback, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { ConnectOptions } from "../store";
+import { ButtonWithLoading } from "./ButtonWithLoading";
 
 interface ConnectFirstDialogProps
   extends Omit<ComponentProps<typeof Modal>, "children"> {
@@ -124,13 +124,13 @@ const ConnectFirstDialog = ({
             </Text>
           </ModalBody>
           <ModalFooter justifyContent="flex-end">
-            <Button
+            <ButtonWithLoading
               variant="primary"
               onClick={handleConnect}
               isLoading={isWaiting}
             >
               <FormattedMessage id="connect-action" />
-            </Button>
+            </ButtonWithLoading>
           </ModalFooter>
         </ModalContent>
       </ModalOverlay>

src/components/IncompatibleEditorDevice.tsx

@@ -20,6 +20,7 @@ import {
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 import { useProject } from "../hooks/project-hooks";
+import { ButtonWithLoading } from "./ButtonWithLoading";
 
 interface IncompatibleEditorDeviceProps {
   isOpen: boolean;
@@ -122,7 +123,7 @@ const IncompatibleEditorDevice = ({
                   id={onBack ? "back-action" : "cancel-action"}
                 />
               </Button>
-              <Button
+              <ButtonWithLoading
                 onClick={onNext ?? onClose}
                 variant={onNext ? "primary" : "secondary"}
                 size="lg"
@@ -131,7 +132,7 @@ const IncompatibleEditorDevice = ({
                 <FormattedMessage
                   id={onNext ? "continue-makecode-action" : "cancel-action"}
                 />
-              </Button>
+              </ButtonWithLoading>
             </HStack>
           </ModalFooter>
         </ModalContent>

src/pages/ImportPage.tsx

@@ -28,6 +28,7 @@ import { MicrobitOrgResource } from "../model";
 import { validateProjectName } from "../project-name";
 import { useStore } from "../store";
 import { createDataSamplesPageUrl } from "../urls";
+import { ButtonWithLoading } from "../components/ButtonWithLoading";
 
 const ImportPage = () => {
   const intl = useIntl();
@@ -152,15 +153,15 @@ const ImportPage = () => {
             />
           </Stack>
           <HStack pt={5} justifyContent="flex-end">
-            <Button
+            <ButtonWithLoading
               isDisabled={!isValidSetup}
               isLoading={fetchingProject}
               variant="primary"
               onClick={handleStartSession}
               size="lg"
             >
               <FormattedMessage id="start-session-action" />
-            </Button>
+            </ButtonWithLoading>
           </HStack>
         </Stack>
       </VStack>

src/pages/TestingModelPage.tsx

@@ -37,6 +37,7 @@ import { keyboardShortcuts, useShortcut } from "../keyboard-shortcut-hooks";
 import { useStore } from "../store";
 import { tourElClassname } from "../tours";
 import { createDataSamplesPageUrl } from "../urls";
+import { ButtonWithLoading } from "../components/ButtonWithLoading";
 
 const TestingModelPage = () => {
   const navigate = useNavigate();
@@ -153,7 +154,7 @@ const TestingModelPage = () => {
         >
           <Menu>
             <ButtonGroup isAttached>
-              <Button
+              <ButtonWithLoading
                 variant="primary"
                 onClick={maybeOpenEditor}
                 className={tourElClassname.editInMakeCodeButton}
@@ -162,7 +163,7 @@ const TestingModelPage = () => {
                 }
               >
                 <FormattedMessage id="edit-in-makecode-action" />
-              </Button>
+              </ButtonWithLoading>
               <MoreMenuButton
                 variant="primary"
                 aria-label={intl.formatMessage({