feat(core-blocks): CB-469 loading-screen -> app-loading-screen

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<HTMLDivElement>(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))(
     <theme ref={ref} as="div">
       {Screen && <Screen />}

webapp/packages/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs

@@ -1,9 +1,9 @@
-<div id="loading-screen">
+<div id="app-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"
+    <path class="app-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>

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';

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);
+  }, []);
+}

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';

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;
 }
 

webapp/packages/product-default/src/index.html.ejs

@@ -7,8 +7,8 @@
 </head>
 
 <body class="theme-typography">
-      <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/loader.html.ejs') %>
       <div id="root"></div>
+      <%= require('html-loader!@cloudbeaver/core-blocks/src/HTMLTemplates/app-loading-screen.html.ejs') %>
 
       <!-- Dependencies -->
       <% if (webpackConfig.mode == 'production') { %>