feat(core-blocks): CB-469 add loader for the first screen

2026-10-24 11:35:54 +08:00 · 2020-11-10 15:44:53 +03:00
parent 1193b95887
commit a0131adea1
8 changed files with 103 additions and 13 deletions
@@ -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",
@@ -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))(
    <theme ref={ref} as="div">
      {Screen && <Screen />}
@@ -0,0 +1,8 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta content="text/html; charset=utf-8" />
+<link rel="alternate icon" type="image/png" href="favicon.png" sizes="16х16">
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="preload" as="font" />
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
+<link rel="prefetch" href="icons/icons.svg" as="image" type="image/svg+xml" />
@@ -0,0 +1,17 @@
+<div id="loading-screen">
+  <svg xmlns="http://www.w3.org/2000/svg" width="197" height="197" fill="none" viewBox="0 0 197 197">
+    <path fill="#244357" fill-rule="evenodd"
+      d="M131.718 94.87c0-16.77-14.844-31.37-31.541-31.37-12.3 0-23.27 7.468-27.992 18.057-.085-.002-.082-.003-.082-.003h-.083c-12.964 0-23.52 11.681-23.52 24.704 0 9.268 3.844 16.482 11.59 20.335v-.001c8.353 4.904 14.445-11.424 16.3-16.394.253-.679.427-1.146.517-1.318l.063.135c.622 1.352 1.773 3.849 7.32 3.964 0 0-6.732-3.314-3.727-12.108 3.004-8.795 7.445-16.259 13.543-19.71 6.098-3.45 12.259-3.216 17.927-.786 0 0-8.553-7.898-18.382-1.929-5.646 3.43-9.405 7.236-11.993 11.136-1.6.287-3.455.171-4.747.09-.46-.028-.85-.052-1.131-.052-1.352 0-3.439.92-2.496 4.255.408 1.44 1.132 2.889 1.796 4.217.84 1.68 1.585 3.169 1.469 4.206-.232 1.306-.333 2.482-.297 3.519-.121.193-.324.592-.602 1.138-2.3 4.515-9.738 19.115-18.74 11.338.134.119.267.269.398.446-6.944-6.717-5.559-20.578-.4-25.422 8.716-8.182 18.414-6.105 18.414-6.105l1.204-2.7c.146-.328.303-.7.475-1.11 2.197-5.221 6.913-16.434 24.024-16.22 19.515.245 24.829 20.966 24.836 27.875l-.001.084-.011 4.881 4.842-.423c.383-.033.764-.05 1.131-.05 7.088 0 14.325 5.538 14.325 12.657s-7.237 10.828-14.325 10.828h-10.553c-7.571-1.029-5.436-4.752-3.506-8.115.18-.313.358-.624.526-.929 2.368-4.289 3.177-7.02 3.687-10.959.306-2.368.081-4.141.016-4.568-.01-.065-.017-.1-.017-.1s-.008.133-.033.359l.033-.587s-1.494 6.033-4.441 8.197c-.686.504-1.124.838-1.406 1.063.297-1.125 1.41-5.866-.181-8.463 0 0-.66 10.908-6.45 11.488-5.791.579-13.952-5.372-16.285-7.762.104.497.22.963.342 1.414l-.115-.131s.097.225.246.61c.207.712.436 1.362.68 1.964.812 2.617 1.677 6.633.387 9.151-.17.331-.688.795-1.314 1.354-2.66 2.376-7.252 6.479 4.782 9.494 1.255.41 2.676.737 4.251.891h.006c.628.061 1.282.095 1.959.095h27.386c9.555 0 17.3-5.444 17.3-15.04 0-9.597-7.849-17.59-17.404-17.59zm-12.824-9.6c-1.825-.686-6.514-.223-9.809 1.07-1.616.633-2.898 1.465-3.339 2.46-1.209 2.732 6.197 7.476 9.181 6.602 1.422-.415 3.464-3.455 4.375-6.115.647-1.892.722-3.59-.408-4.016zm-16.56 2.251c-.845-.108-2.593-.346-3.152-.981-1.248-1.42-3.249-1.8-4.704-1.48-1.54.34-2.362 2.143-1.302 4.384.475 1.007.354 2.222-.13 3.129 1.515-1.419 2.931-2.574 3.983-3.129 2.071-1.095 3.908-1.662 5.306-1.923h-.001zm15.125 20.777s-1.512 5.162-2.57 7.513c-.815 1.814-1.143 1.915-1.664 2.074-.074.023-.153.047-.237.077.223-.567.392-1.291.657-2.43l.002-.012.109-.467c.4-1.713 0-2.164 0-2.164-.524 2.563-1.338 4.394-2.031 5.595-.897.302-2.002.496-2.805.174-1.133-.455-1.326-5.807-1.326-6.11 4.932.341 7.56-1.67 9.864-4.25h.001z"
+      clip-rule="evenodd" />
+    <path class="loading-screen__logo-spinner" fill="url(#paint0_radial)" fill-rule="evenodd"
+      d="M98.5 9C49.07 9 9 49.07 9 98.5 9 147.929 49.07 188 98.5 188c49.429 0 89.5-40.071 89.5-89.5 0-2.485 2.015-4.5 4.5-4.5s4.5 2.015 4.5 4.5c0 54.4-44.1 98.5-98.5 98.5S0 152.9 0 98.5 44.1 0 98.5 0c2.485 0 4.5 2.015 4.5 4.5S100.985 9 98.5 9z"
+      clip-rule="evenodd" />
+    <defs>
+      <radialGradient id="paint0_radial" cx="0" cy="0" r="1"
+        gradientTransform="rotate(-16.764 140.93 -3.503) scale(211.488 209.238)" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#244357" />
+        <stop offset="1" stop-color="#244357" stop-opacity="0" />
+      </radialGradient>
+    </defs>
+  </svg>
+</div>
@@ -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';
@@ -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); } }
@@ -2,20 +2,13 @@
 <html lang="en" dir="ltr" data-version="<%= htmlWebpackPlugin.options.version %>">

 <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-      <meta content="text/html; charset=utf-8" />
-      <link rel="alternate icon" type="image/png" href="favicon.png" sizes="16х16">
-      <link rel="icon" type="image/svg+xml" href="favicon.svg">
-      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="preload" as="font" />
-      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
-      <link rel="prefetch" href="icons/icons.svg" as="image" type="image/svg+xml" />
-
+      <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/head.html.ejs') %>
      <title>CloudBeaver</title>
 </head>

 <body class="theme-typography">
-      <div id="root">Loading...</div>
+      <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/loader.html.ejs') %>
+      <div id="root"></div>

      <!-- Dependencies -->
      <% if (webpackConfig.mode == 'production') { %>
@@ -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"