Fix more google translate crashes

isLoading will cause crashes if the body content is not wrapped in span. the nodes must always exist throughout the button lifecycle

Author: synzen

services/backend-api/client/src/features/feed/components/AddFilterDialog/index.tsx

@@ -64,7 +64,7 @@ export const AddFilterDialog: React.FC<Props> = ({ onSubmit }) => {
   return (
     <>
       <Button colorScheme="blue" isDisabled={saving} isLoading={saving} onClick={onOpen}>
-        {t("components.addFilterDialog.addButton")}
+        <span>{t("components.addFilterDialog.addButton")}</span>
       </Button>
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />

services/backend-api/client/src/features/feed/components/AddUserFeedDialog/index.tsx

@@ -132,7 +132,7 @@ export const AddUserFeedDialog = ({ trigger }: Props) => {
             isLoading={isLoading}
             variant="solid"
           >
-            {t("features.userFeeds.components.addUserFeedDialog.addButton")}
+            <span>{t("features.userFeeds.components.addUserFeedDialog.addButton")}</span>
           </Button>
         )}
       </Tooltip>

services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/SelectableUserFeedList.tsx

@@ -97,7 +97,7 @@ export const SelectableUserFeedList = ({ selectedIds, onSelectedIdsChange }: Pro
             size="sm"
             width="full"
           >
-            Load more
+            <span>Load more</span>
           </Button>
         </Flex>
       </Stack>

services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx

@@ -752,7 +752,7 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
           onClick={() => fetchNextPage()}
           mb={20}
         >
-          Load More
+          <span>Load More</span>
         </Button>
       </Stack>
     </Stack>

services/backend-api/client/src/features/feedConnections/components/CloneDiscordConnectionCloneDialog/index.tsx

@@ -138,7 +138,7 @@ export const CloneDiscordConnectionCloneDialog = ({
                 Cancel
               </Button>
               <Button colorScheme="blue" type="submit" form="clonefeed" isLoading={isSubmitting}>
-                Clone
+                <span>Clone</span>
               </Button>
             </HStack>
           </ModalFooter>

services/backend-api/client/src/features/feedConnections/components/ComparisonsTabSection/AddComparisonSelect.tsx

@@ -57,7 +57,7 @@ export const AddComparisonSelect = ({
           minW={32}
           isLoading={isAdding || isLoading}
         >
-          Add
+          <span>Add</span>
         </Button>
       </Stack>
     </Box>

services/backend-api/client/src/features/feedConnections/components/ComparisonsTabSection/index.tsx

@@ -323,7 +323,7 @@ export const ComparisonsTabSection = ({
                   isDisabled={userFeedArticlesFetchStatus === "fetching"}
                   size="sm"
                 >
-                  Select article to preview
+                  <span>Select article to preview</span>
                 </Button>
               }
               feedId={feedId}

services/backend-api/client/src/features/feedConnections/components/UserFeedSettingsTabSection/AddFeedComanagerDialog/index.tsx

@@ -246,7 +246,7 @@ export const AddFeedComanagerDialog = ({
                 isDisabled={!selectedMention || !checkedConnections.length || saving}
                 isLoading={saving}
               >
-                {okButtonText || t("common.buttons.save")}
+                <span>{okButtonText || t("common.buttons.save")}</span>
               </Button>
             </HStack>
           </ModalFooter>

services/backend-api/client/src/pages/FeedClone.tsx

@@ -169,7 +169,7 @@ const FeedClone: React.FC = () => {
             isDisabled={!selectedFeedId || !properties.length || loadingFeeds || saving}
             colorScheme="blue"
           >
-            {t("pages.cloneFeed.cloneButtonLabel")}
+            <span>{t("pages.cloneFeed.cloneButtonLabel")}</span>
           </Button>
         </HStack>
       </Stack>

services/backend-api/client/src/pages/UserSettings.tsx

@@ -140,8 +140,9 @@ const ChangePaymentMethodUrlButton = () => {
         isDisabled={!!error}
         colorScheme={error ? "red" : undefined}
       >
-        {!error && <span>Change Payment Method</span>}
-        {error && <span>Failed to load change payment method button</span>}
+        <span>
+          {error ? "Failed to load change payment method button" : "Change Payment Method"}
+        </span>
       </Button>
     </Box>
   );
@@ -574,7 +575,7 @@ export const UserSettings = () => {
                         onClickRemoveRedditLogin();
                       }}
                     >
-                      Disconnect
+                      <span>Disconnect</span>
                     </Button>
                   )}
                 </HStack>