From 47c5498187c495e1944919c16237d3a84c092999 Mon Sep 17 00:00:00 2001
From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com>
Date: Mon, 23 May 2022 15:50:08 -0300
Subject: [PATCH] [FIX] Upgrade tab loader in incorrect position (#25398)

* feat: position correctly the loader with CSS

* fix: hide iframe when loading

* Remove extra curly brackets

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 .../admin/upgrade/UpgradePage/UpgradePage.tsx    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/upgrade/UpgradePage/UpgradePage.tsx b/apps/meteor/client/views/admin/upgrade/UpgradePage/UpgradePage.tsx
index 9b01d50302bd..62b71ef6a6c1 100644
--- a/apps/meteor/client/views/admin/upgrade/UpgradePage/UpgradePage.tsx
+++ b/apps/meteor/client/views/admin/upgrade/UpgradePage/UpgradePage.tsx
@@ -7,8 +7,6 @@ import Page from '../../../../components/Page';
 import PageHeader from '../../../../components/Page/PageHeader';
 import UpgradePageError from '../UpgradePageError';
 
-const iframeStyle = { width: '100%', height: '100%' };
-
 const urlMap: Record<UpgradeTabVariant, string> = {
 	'go-fully-featured': 'https://go.rocket.chat/i/upgrade-ce-1-unregistered',
 	'go-fully-featured-registered': 'https://go.rocket.chat/i/upgrade-ce-1-registered',
@@ -92,11 +90,21 @@ const UpgradePage = (): ReactElement => {
 			{isMobile && <PageHeader title='' />}
 			{!hasConnection && <UpgradePageError />}
 			{hasConnection && isLoading && (
-				<Box pb='x24'>
+				<Box width='100%' height='100%' position='absolute' display='flex' justifyContent='center' alignItems='center'>
 					<Throbber />
 				</Box>
 			)}
-			{hasConnection && <iframe src={pageUrl} style={iframeStyle} ref={ref} onLoad={(): void => setIsLoading(false)} />}
+			{hasConnection && (
+				<Box
+					is='iframe'
+					src={pageUrl}
+					ref={ref}
+					onLoad={(): void => setIsLoading(false)}
+					invisible={isLoading}
+					width='100%'
+					height='100%'
+				/>
+			)}
 		</Page>
 	);
 };