MM-60224 - disable upgrade app button once download starts (#3164)

* MM-60224 - disable upgrade app btn  once download starts

* add translations

* fix styles for update available in dark-mode

src/renderer/components/DownloadsDropdown/Update/UpdateAvailable.tsx

@@ -1,10 +1,12 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useState} from 'react';
 import {Button} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+import LoadingWrapper from 'renderer/components/SaveButton/LoadingWrapper';
+
 import type {DownloadedItem} from 'types/downloads';
 
 import Thumbnail from '../Thumbnail';
@@ -15,7 +17,12 @@ type OwnProps = {
 }
 
 const UpdateAvailable = ({item, appName}: OwnProps) => {
+    const [isProcessing, setIsProcessing] = useState(false);
     const onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (isProcessing) {
+            return;
+        }
+        setIsProcessing(true);
         e?.preventDefault?.();
         window.desktop.downloadsDropdown.startUpdateDownload();
     };
@@ -42,13 +49,25 @@ const UpdateAvailable = ({item, appName}: OwnProps) => {
                 </div>
                 <Button
                     id='downloadUpdateButton'
-                    className='primary-button'
+                    className='primary-button DownloadsDropdown__Update__Details__Button'
+                    variant='primary'
                     onClick={onButtonClick}
+                    disabled={isProcessing}
                 >
-                    <FormattedMessage
-                        id='renderer.downloadsDropdown.Update.DownloadUpdate'
-                        defaultMessage='Download Update'
-                    />
+                    <LoadingWrapper
+                        loading={isProcessing}
+                        text={(
+                            <FormattedMessage
+                                id='renderer.downloadsDropdown.Update.Downloading'
+                                defaultMessage='Downloading'
+                            />
+                        )}
+                    >
+                        <FormattedMessage
+                            id='renderer.downloadsDropdown.Update.DownloadUpdate'
+                            defaultMessage='Download Update'
+                        />
+                    </LoadingWrapper>
                 </Button>
             </div>
         </div>