Merge branch 'devel' of https://github.com/dbeaver/cloudbeaver into devel

webapp/packages/core-bootstrap/src/ErrorPage.tsx

@@ -8,17 +8,63 @@
 
 import { useCallback } from 'react';
 import ReactDOM from 'react-dom';
+import styled, { css } from 'reshadow';
+
+import { useAppLoadingSreen } from '@cloudbeaver/core-blocks';
+
+interface IRefreshProps {
+  className?: string;
+}
+
+const ERROR_PAGE_STYLES = css`
+  container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  container-inner-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  Refresh {
+    color: white;
+    font-weight: 500;
+    background-color: #2a7cb4;
+    padding: 5px 16px;
+    border-radius: 4px;
+    letter-spacing: .08929em;
+    font-size: .875rem;
+    text-transform: uppercase;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    &:hover, &:focus {
+      opacity: 0.8;
+    }
+    &:active {
+      opacity: 0.5;
+    }
+  }
+`;
+
+function Refresh({ className }: IRefreshProps) {
+  useAppLoadingSreen();
 
-function Refresh() {
   const handleRefresh = useCallback(() => window.location.reload(), []);
-  return <a onClick={handleRefresh}>Refresh</a>;
+  return <button className={className} onClick={handleRefresh}>Refresh</button>;
 }
 
 export function showErrorPage() {
-  ReactDOM.render(
-    <div>
-      Error occurred while loading <Refresh />
-    </div>,
-    document.getElementById('root')
+  ReactDOM.render(styled(ERROR_PAGE_STYLES)(
+    <container as='div'>
+      <container-inner-block as='div'>
+        <p>Error occurred while loading the page</p>
+        <Refresh />
+      </container-inner-block>
+    </container>),
+  document.getElementById('root')
   );
 }