From 584c8f9715f0ecd7cc1add5534df6ab3814fdfde Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Wed, 11 Nov 2020 19:49:32 +0300 Subject: [PATCH] feat(core-blocks): CB-469 loading-screen -> app-loading-screen --- webapp/packages/core-app/src/Body.tsx | 18 +++--------------- ...r.html.ejs => app-loading-screen.html.ejs} | 4 ++-- webapp/packages/core-blocks/src/index.ts | 1 + .../core-blocks/src/useAppLoadingScreen.tsx | 19 +++++++++++++++++++ .../packages/core-theming/src/ThemeService.ts | 2 +- ...ding-screen.css => app-loading-screen.css} | 8 ++++---- .../product-default/src/index.html.ejs | 2 +- 7 files changed, 31 insertions(+), 23 deletions(-) rename webapp/packages/core-blocks/src/HTMLTemplates/{loader.html.ejs => app-loading-screen.html.ejs} (96%) create mode 100644 webapp/packages/core-blocks/src/useAppLoadingScreen.tsx rename webapp/packages/core-theming/src/styles/main/{loading-screen.css => app-loading-screen.css} (80%) diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx index ff9b0339b7..6fd5d957e1 100644 --- a/webapp/packages/core-app/src/Body.tsx +++ b/webapp/packages/core-app/src/Body.tsx @@ -10,6 +10,7 @@ import { observer } from 'mobx-react'; import { useRef, useLayoutEffect, useEffect } from 'react'; import styled, { css } from 'reshadow'; +import { useAppLoadingSreen } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { DialogsPortal } from '@cloudbeaver/core-dialogs'; import { Notifications } from '@cloudbeaver/core-notifications'; @@ -27,10 +28,12 @@ const bodyStyles = css` `; export const Body = observer(function Body() { + useAppLoadingSreen(); const ref = useRef(null); const screenService = useService(ScreenService); const Screen = screenService.screen?.component; const { backendVersion } = useAppVersion(); + // sync classes from theme with body for popup components and etc useLayoutEffect(() => { if (ref.current) { @@ -39,21 +42,6 @@ export const Body = observer(function Body() { document.documentElement.dataset.backendVersion = backendVersion; }); - useEffect(() => { - const appLoadingScreen = document.getElementById('loading-screen'); - let onTransitionEnd: () => void; - - if (appLoadingScreen) { - onTransitionEnd = () => { - appLoadingScreen.style.display = 'none'; - }; - appLoadingScreen.addEventListener('transitionend', onTransitionEnd); - appLoadingScreen.classList.add('loading-screen--fade-out'); - } - - return () => appLoadingScreen?.removeEventListener('transitionend', onTransitionEnd); - }, []); - return styled(useStyles(bodyStyles))( {Screen && } diff --git a/webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs b/webapp/packages/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs similarity index 96% rename from webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs rename to webapp/packages/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs index d21916d77d..dd8e73d1a2 100644 --- a/webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs +++ b/webapp/packages/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs @@ -1,9 +1,9 @@ -
+
- diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 438f9db4f8..b3c95d16e0 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -48,6 +48,7 @@ export * from './StaticImage'; export * from './TextPlaceholder'; export * from './useClipboard'; export * from './useFocus'; +export * from './useAppLoadingScreen'; export * from './BlocksLocaleService'; export * from './Snackbars/NotificationMark'; export * from './Snackbars/Snackbar'; diff --git a/webapp/packages/core-blocks/src/useAppLoadingScreen.tsx b/webapp/packages/core-blocks/src/useAppLoadingScreen.tsx new file mode 100644 index 0000000000..119c4da9b1 --- /dev/null +++ b/webapp/packages/core-blocks/src/useAppLoadingScreen.tsx @@ -0,0 +1,19 @@ +import { useEffect } from 'react'; + +export function useAppLoadingSreen() { + useEffect(() => { + const appLoadingScreen = document.getElementById('app-loading-screen'); + if (!appLoadingScreen) { + return; + } + + const onTransitionEnd = () => { + appLoadingScreen.style.display = 'none'; + }; + + appLoadingScreen.addEventListener('transitionend', onTransitionEnd); + appLoadingScreen.classList.add('app-loading-screen--fade-out'); + + return () => appLoadingScreen.removeEventListener('transitionend', onTransitionEnd); + }, []); +} diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 10a8af2217..9de7afbeb6 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -9,7 +9,7 @@ import { action, computed, observable } from 'mobx'; import './styles/main/normalize.css'; -import './styles/main/loading-screen.css'; +import './styles/main/app-loading-screen.css'; import './styles/main/elevation.scss'; import './styles/main/typography.scss'; import './styles/main/color.scss'; diff --git a/webapp/packages/core-theming/src/styles/main/loading-screen.css b/webapp/packages/core-theming/src/styles/main/app-loading-screen.css similarity index 80% rename from webapp/packages/core-theming/src/styles/main/loading-screen.css rename to webapp/packages/core-theming/src/styles/main/app-loading-screen.css index 1120995a19..874e17440a 100644 --- a/webapp/packages/core-theming/src/styles/main/loading-screen.css +++ b/webapp/packages/core-theming/src/styles/main/app-loading-screen.css @@ -1,4 +1,4 @@ -#loading-screen { +#app-loading-screen { z-index: 999; position: absolute; top: 0; @@ -8,16 +8,16 @@ display: flex; align-items: center; justify-content: center; - transition: all 0.3s; + transition: opacity 0.3s; background: white; } -#loading-screen .loading-screen__logo-spinner { +#app-loading-screen .app-loading-screen__logo-spinner { transform-origin: center; -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; } -.loading-screen--fade-out { +.app-loading-screen--fade-out { opacity: 0; } diff --git a/webapp/packages/product-default/src/index.html.ejs b/webapp/packages/product-default/src/index.html.ejs index f9095a87f2..008f56e8a5 100644 --- a/webapp/packages/product-default/src/index.html.ejs +++ b/webapp/packages/product-default/src/index.html.ejs @@ -7,8 +7,8 @@ - <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/loader.html.ejs') %>
+ <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs') %> <% if (webpackConfig.mode == 'production') { %>