From a0131adea18945971616285c38a934ae05c2ac09 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 10 Nov 2020 15:44:53 +0300 Subject: [PATCH] feat(core-blocks): CB-469 add loader for the first screen --- webapp/package.json | 1 + webapp/packages/core-app/src/Body.tsx | 17 +++++++++- .../src/HTMLTemplates/head.html.ejs | 8 +++++ .../src/HTMLTemplates/loader.html.ejs | 17 ++++++++++ .../packages/core-theming/src/ThemeService.ts | 1 + .../src/styles/main/loading-screen.css | 26 +++++++++++++++ .../product-default/src/index.html.ejs | 13 ++------ webapp/yarn.lock | 33 +++++++++++++++++-- 8 files changed, 103 insertions(+), 13 deletions(-) create mode 100644 webapp/packages/core-blocks/src/HTMLTemplates/head.html.ejs create mode 100644 webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs create mode 100644 webapp/packages/core-theming/src/styles/main/loading-screen.css diff --git a/webapp/package.json b/webapp/package.json index 8ed90924fc..0cab741429 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -48,6 +48,7 @@ "eslint-plugin-react-hooks": "^4.1.2", "eslint-plugin-standard": "^4.0.1", "fork-ts-checker-webpack-plugin": "^5.1.0", + "html-loader": "^1.3.2", "html-webpack-plugin": "^4.4.1", "json5-loader": "^4.0.0", "lerna": "^3.22.1", diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx index 692925d912..ff9b0339b7 100644 --- a/webapp/packages/core-app/src/Body.tsx +++ b/webapp/packages/core-app/src/Body.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react'; -import { useRef, useLayoutEffect } from 'react'; +import { useRef, useLayoutEffect, useEffect } from 'react'; import styled, { css } from 'reshadow'; import { useService } from '@cloudbeaver/core-di'; @@ -39,6 +39,21 @@ 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/head.html.ejs b/webapp/packages/core-blocks/src/HTMLTemplates/head.html.ejs new file mode 100644 index 0000000000..351922cb6d --- /dev/null +++ b/webapp/packages/core-blocks/src/HTMLTemplates/head.html.ejs @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs b/webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs new file mode 100644 index 0000000000..d21916d77d --- /dev/null +++ b/webapp/packages/core-blocks/src/HTMLTemplates/loader.html.ejs @@ -0,0 +1,17 @@ +
+ + + + + + + + + + +
\ No newline at end of file diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 9130994fa9..10a8af2217 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -9,6 +9,7 @@ import { action, computed, observable } from 'mobx'; import './styles/main/normalize.css'; +import './styles/main/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/loading-screen.css new file mode 100644 index 0000000000..1120995a19 --- /dev/null +++ b/webapp/packages/core-theming/src/styles/main/loading-screen.css @@ -0,0 +1,26 @@ +#loading-screen { + z-index: 999; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; + background: white; +} +#loading-screen .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 { + opacity: 0; +} + +@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } +@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } +@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } \ No newline at end of file diff --git a/webapp/packages/product-default/src/index.html.ejs b/webapp/packages/product-default/src/index.html.ejs index 65036a6d62..f9095a87f2 100644 --- a/webapp/packages/product-default/src/index.html.ejs +++ b/webapp/packages/product-default/src/index.html.ejs @@ -2,20 +2,13 @@ - - - - - - - - - + <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/head.html.ejs') %> CloudBeaver -
Loading...
+ <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/loader.html.ejs') %> +
<% if (webpackConfig.mode == 'production') { %> diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 5de2d0a441..70de56fa0a 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -2737,7 +2737,7 @@ resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb" integrity sha512-JCcp6J0GV66Y4ZMDAQCXot4xprYB+Zfd3meK9+INSJeVZwJmHAW30BBEEkPzXswMXuiyReUGOP3GxrADc9wPww== -"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5": +"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6": version "7.0.6" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== @@ -3321,6 +3321,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4: json-schema-traverse "^0.4.1" uri-js "^4.2.2" +ajv@^6.12.5: + version "6.12.6" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" + integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== + dependencies: + fast-deep-equal "^3.1.1" + fast-json-stable-stringify "^2.0.0" + json-schema-traverse "^0.4.1" + uri-js "^4.2.2" + alphanum-sort@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" @@ -7296,7 +7306,17 @@ html-entities@^1.3.1: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44" integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA== -html-minifier-terser@^5.0.1: +html-loader@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-1.3.2.tgz#5a72ebba420d337083497c9aba7866c9e1aee340" + integrity sha512-DEkUwSd0sijK5PF3kRWspYi56XP7bTNkyg5YWSzBdjaSDmvCufep5c4Vpb3PBf6lUL0YPtLwBfy9fL0t5hBAGA== + dependencies: + html-minifier-terser "^5.1.1" + htmlparser2 "^4.1.0" + loader-utils "^2.0.0" + schema-utils "^3.0.0" + +html-minifier-terser@^5.0.1, html-minifier-terser@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054" integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg== @@ -11927,6 +11947,15 @@ schema-utils@^2.0.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6 ajv "^6.12.4" ajv-keywords "^3.5.2" +schema-utils@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef" + integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA== + dependencies: + "@types/json-schema" "^7.0.6" + ajv "^6.12.5" + ajv-keywords "^3.5.2" + scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"