This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch dev in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 9fa6ef6851895a52f18535aafd006d0192aafe5d Author: Ourai Lin <[email protected]> AuthorDate: Tue Oct 22 11:32:52 2024 +0800 chore(ui): copy style from `public/index.html` to keep consistency --- .../InitialLoadingPlaceholder/index.scss | 35 ++++++++++++++++++++++ .../components/InitialLoadingPlaceholder/index.tsx | 17 +++++------ 2 files changed, 42 insertions(+), 10 deletions(-) diff --git a/ui/src/components/InitialLoadingPlaceholder/index.scss b/ui/src/components/InitialLoadingPlaceholder/index.scss new file mode 100644 index 00000000..2b73f163 --- /dev/null +++ b/ui/src/components/InitialLoadingPlaceholder/index.scss @@ -0,0 +1,35 @@ +// Same as spin in `public/index.html` + +@keyframes _initial-loading-spin { + to { transform: rotate(360deg) } +} + +.InitialLoadingPlaceholder { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: white; + z-index: 9999; + + &-spinnerContainer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &-spinner { + box-sizing: border-box; + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: -.125em; + border: .25rem solid currentColor; + border-right-color: transparent; + color: rgba(108, 117, 125, .75); + border-radius: 50%; + animation: 0.75s linear infinite _initial-loading-spin; + } +} diff --git a/ui/src/components/InitialLoadingPlaceholder/index.tsx b/ui/src/components/InitialLoadingPlaceholder/index.tsx index 28ba1cfd..41e81d1a 100644 --- a/ui/src/components/InitialLoadingPlaceholder/index.tsx +++ b/ui/src/components/InitialLoadingPlaceholder/index.tsx @@ -1,16 +1,13 @@ -import { Spinner } from 'react-bootstrap'; +// Same as spin in `public/index.html` + +import './index.scss'; function InitialLoadingPlaceholder() { return ( - <div - style={{ - flexGrow: 1, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }}> - <Spinner /> - <span style={{ marginLeft: 8 }}>Initializing</span> + <div className="InitialLoadingPlaceholder"> + <div className="InitialLoadingPlaceholder-spinnerContainer"> + <div className="InitialLoadingPlaceholder-spinner" /> + </div> </div> ); }
