Resolved feedback

brave · Dec 6, 2022 · 76a53d7 · 76a53d7
1 parent bb8cf67
commit 76a53d7
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 7 deletions.
diff --git a/browser/ui/webui/brave_welcome_ui.cc b/browser/ui/webui/brave_welcome_ui.cc
@@ -282,6 +282,8 @@ BraveWelcomeUI::BraveWelcomeUI(content::WebUI* web_ui, const std::string& name)
       content::GpuDataManager::GetInstance()->HardwareAccelerationEnabled());
 
   profile->GetPrefs()->SetBoolean(prefs::kHasSeenWelcomePage, true);
+
+  AddBackgroundColorToSource(source, web_ui->GetWebContents());
 }
 
 BraveWelcomeUI::~BraveWelcomeUI() = default;
diff --git a/components/brave_welcome_ui/brave_welcome.html b/components/brave_welcome_ui/brave_welcome.html
@@ -12,15 +12,15 @@
   #root { height: 100%; width: 100%; }
 
   body {
-    background: black;
     height: 100vh;
     margin: 0;
     padding: 0;
+    background: $i18n{backgroundColor};
   }
 </style>
 </head>
 <body>
-<script src="chrome://resources/cr_elements/cr_lottie/cr_lottie.js" type="module" defer></script>
+<script src="chrome://resources/cr_elements/cr_lottie/cr_lottie.js" type="module"></script>
 <script src="/brave_welcome.bundle.js"></script>
 <div id="root" />
 </body>

diff --git a/components/brave_welcome_ui/components/loader/index.tsx b/components/brave_welcome_ui/components/loader/index.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import styled from 'styled-components'
+import { LoaderIcon } from 'brave-ui/components/icons'
+
+const Loading = styled('div')`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const Graphic = styled('div')`
+  width: 50px;
+  height: 50px;
+  align-self: center;
+
+  svg {
+    fill: white;
+  }
+`
+
+export default function Loader () {
+  return (
+    <Loading aria-busy='true'>
+      <Graphic aria-label='Loading'>
+        <LoaderIcon />
+      </Graphic>
+    </Loading>
+  )
+}
diff --git a/components/brave_welcome_ui/components/welcome/index.tsx b/components/brave_welcome_ui/components/welcome/index.tsx
@@ -4,18 +4,19 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { getLocale } from '$web-common/locale'
-import classnames from '$web-common/classnames'
-
 import * as S from './style'
 
+import classnames from '$web-common/classnames'
+import { getLocale } from '$web-common/locale'
+import Button from '$web-components/button'
+
 import { WelcomeBrowserProxyImpl, DefaultBrowserBrowserProxyImpl } from '../../api/welcome_browser_proxy'
 import WebAnimationPlayer from '../../api/web_animation_player'
+
 import DataContext from '../../state/context'
 import { ViewType } from '../../state/component_types'
 import { useShouldPlayAnimations } from '../../state/hooks'
 
-import Button from '$web-components/button'
 import braveLogoUrl from '../../assets/[email protected]'
 
 function Welcome () {

diff --git a/components/brave_welcome_ui/components/welcome/style.ts b/components/brave_welcome_ui/components/welcome/style.ts
@@ -43,6 +43,7 @@ export const Box = styled.div`
     position: relative;
     z-index: 3;
 
+    // We define an initial state here if animations are enabled
     &.initial {
       transform: translateY(20px);
       opacity: 0;

diff --git a/components/brave_welcome_ui/main_container.tsx b/components/brave_welcome_ui/main_container.tsx
@@ -13,6 +13,7 @@ import HelpImprove from './components/help-improve'
 import ImportInProgress from './components/import-in-progress'
 import Background from './components/background'
 import Welcome from './components/welcome'
+import Loader from './components/loader'
 
 const SelectBrowser = React.lazy(() => import('./components/select-browser'))
 const SelectProfile = React.lazy(() => import('./components/select-profile'))
@@ -61,7 +62,7 @@ function MainContainer () {
       static={!shouldPlayAnimations}
       onLoad={onBackgroundImgLoad}
     >
-      <React.Suspense fallback={<div>Loading...</div>}>
+      <React.Suspense fallback={<Loader />}>
         {mainEl}
       </React.Suspense>
     </Background>