From d5c9ae2bafd7ffc794d2f1b3683e59fbd3c36d35 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 24 Apr 2023 11:38:35 -0700
Subject: [PATCH] UI: Initial render whitespace bug (#11159)

## Addresses #11088
Updated solution:
https://www.loom.com/share/e3ca30bebde54df5b8cbd8cac6d26780
- First refresh displays the bug: a white bar at the top of the page as
the login page loads.
- Second refresh displays the login page with the bug gone
- Navigate at the end to an error page to confirm it is unaffected,
since the initial solution affected the background color of those pages

## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/11088-whitespace-at-login      | 1 +
 frontend/pages/LoginPage/LoginPage.tsx | 4 +++-
 frontend/pages/LoginPage/_styles.scss  | 8 ++++++++
 frontend/requestCSRdata.ts             | 4 ----
 4 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 changes/11088-whitespace-at-login
 delete mode 100644 frontend/requestCSRdata.ts

diff --git a/changes/11088-whitespace-at-login b/changes/11088-whitespace-at-login
new file mode 100644
index 0000000000..0b61b9ac4c
--- /dev/null
+++ b/changes/11088-whitespace-at-login
@@ -0,0 +1 @@
+- Fix a bug where a white bar appears at the top of the login page before the app renders.
diff --git a/frontend/pages/LoginPage/LoginPage.tsx b/frontend/pages/LoginPage/LoginPage.tsx
index 017f2a2fa5..f190f58be8 100644
--- a/frontend/pages/LoginPage/LoginPage.tsx
+++ b/frontend/pages/LoginPage/LoginPage.tsx
@@ -49,6 +49,8 @@ const statusMessages: IStatusMessages = {
     "There was an error with single sign-on. Please contact your Fleet administrator.",
 };
 
+const baseClass = "login-page";
+
 const LoginPage = ({ router, location }: ILoginPageProps) => {
   const {
     availableTeams,
@@ -193,7 +195,7 @@ const LoginPage = ({ router, location }: ILoginPageProps) => {
   }, [redirectLocation]);
 
   if (isLoadingSSOSettings) {
-    return <Spinner />;
+    return <Spinner className={`${baseClass}__loading-spinner`} />;
   }
 
   return (
diff --git a/frontend/pages/LoginPage/_styles.scss b/frontend/pages/LoginPage/_styles.scss
index 29e862977a..375794d0b1 100644
--- a/frontend/pages/LoginPage/_styles.scss
+++ b/frontend/pages/LoginPage/_styles.scss
@@ -1,3 +1,11 @@
+.login-page {
+  &__loading-spinner.centered {
+    margin: 0;
+    position: absolute;
+    left: 50vw;
+    top: 40vh;
+  }
+}
 .login-form-animation-leave {
   transform: scale(1);
   opacity: 1;
diff --git a/frontend/requestCSRdata.ts b/frontend/requestCSRdata.ts
deleted file mode 100644
index 3c0e51eabf..0000000000
--- a/frontend/requestCSRdata.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IRequestCSRData {
-  email: string;
-  org_name: string;
-}