From dec06239bf24ea7e9adfbc6154e19135c2bd969b Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Mon, 30 Nov 2020 22:18:44 +0300
Subject: [PATCH] fix: CB-574 loaders and content flickering

---
 .../ConnectionAccess/ConnectionAccess.tsx     |  4 ++--
 .../ConnectionForm/ConnectionForm.tsx         | 15 --------------
 .../ConnectionForm/OriginInfo/OriginInfo.tsx  |  4 ++--
 .../ConnectionsTable/ConnectionEdit.tsx       | 20 +++++++++++++------
 .../Users/UserForm/OriginInfo.tsx             |  4 ++--
 .../Users/UserForm/UserForm.tsx               |  2 +-
 .../Users/UserForm/UserFormController.ts      |  2 +-
 .../Users/UsersTable/UserEdit.tsx             | 19 +++++++++++++-----
 8 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
index 503e192047..59e76ca21c 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
@@ -82,7 +82,7 @@ export const ConnectionAccess = observer(function ConnectionAccess({
   if (controller.isLoading) {
     return styled(style)(
       <box as='div'>
-        <Loader />
+        <Loader key="static" />
       </box>
     );
   }
@@ -124,7 +124,7 @@ export const ConnectionAccess = observer(function ConnectionAccess({
           ))}
         </TableBody>
       </Table>
-      <Loader loading={controller.isLoading} overlay />
+      <Loader key="overlay" loading={controller.isLoading} overlay />
     </box>
   );
 });
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
index a026bbe9e4..6960a81617 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
@@ -38,10 +38,6 @@ const styles = composes(
     content-box {
       composes: theme-background-secondary theme-border-color-background from global;
     }
-
-    GrantedSubjects {
-      composes: theme-background-surface from global;
-    }
   `,
   css`
     box {
@@ -59,21 +55,10 @@ const styles = composes(
       overflow: auto;
     }
 
-    SubmittingForm {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
     fill {
       flex: 1;
     }
 
-    SubmittingForm, Loader {
-      min-height: 320px;
-      max-height: 500px;
-    }
-
     Button:not(:first-child) {
       margin-right: 24px;
     }
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/OriginInfo/OriginInfo.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/OriginInfo/OriginInfo.tsx
index 98ccc903e9..bcdd348bae 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/OriginInfo/OriginInfo.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/OriginInfo/OriginInfo.tsx
@@ -67,7 +67,7 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
   if (state.loading) {
     return (
       <FormBox>
-        <Loader />
+        <Loader key="static" />
       </FormBox>
     );
   }
@@ -99,7 +99,7 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
           autoHide
         />
       </FormBoxElement>
-      <Loader loading={state.loading} overlay />
+      <Loader key="overlay" loading={state.loading} overlay />
     </FormBox>
   );
 });
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
index 0a87f5d0d1..8d614d4863 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
@@ -7,10 +7,10 @@
  */
 
 import { observer } from 'mobx-react';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, useRef, useEffect } from 'react';
 import styled, { css } from 'reshadow';
 
-import { TableContext } from '@cloudbeaver/core-blocks';
+import { Loader, TableContext } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
@@ -28,7 +28,7 @@ const styles = composes(
     box {
       box-sizing: border-box;
       padding: 24px;
-      min-height: 320px;
+      min-height: 440px;
       max-height: 500px;
       display: flex;
       flex-direction: column;
@@ -43,19 +43,27 @@ interface Props {
 export const ConnectionEdit = observer(function ConnectionEdit({
   item,
 }: Props) {
+  const boxRef = useRef<HTMLDivElement>(null);
   const tableContext = useContext(TableContext);
   const collapse = useCallback(() => tableContext?.setItemExpand(item, false), [tableContext, item]);
   const controller = useController(ConnectionEditController, item);
 
+  useEffect(() => {
+    boxRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }, []);
+
   return styled(useStyles(styles))(
-    <box as='div'>
-      {controller.connection && (
+    <box ref={boxRef} as='div'>
+      {controller.connection ? (
         <ConnectionForm
           model={controller as IConnectionFormModel}
           onBack={collapse}
           onCancel={collapse}
         />
-      )}
+      ) : <Loader />}
     </box>
   );
 });
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/OriginInfo.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/OriginInfo.tsx
index 1269566cd0..61fadbed45 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/OriginInfo.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/OriginInfo.tsx
@@ -71,7 +71,7 @@ export const OriginInfo: TabContainerPanelComponent<IUserFormProps> = observer(f
   if (state.loading) {
     return (
       <FormBox>
-        <Loader />
+        <Loader key="static" />
       </FormBox>
     );
   }
@@ -103,7 +103,7 @@ export const OriginInfo: TabContainerPanelComponent<IUserFormProps> = observer(f
           autoHide
         />
       </FormBoxElement>
-      <Loader loading={state.loading} overlay />
+      <Loader key="overlay" loading={state.loading} overlay />
     </FormBox>
   );
 });
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
index fdb2f6f0ef..11428716ce 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
@@ -142,7 +142,7 @@ export const UserForm = observer(function UserForm({
         <content-box as='div'>
           <SubmittingForm ref={focusedRef} onSubmit={controller.save}>
             <TabPanelList style={tabsStyles} />
-            {controller.isLoading && <Loader overlay />}
+            <Loader loading={controller.isLoading} overlay />
           </SubmittingForm>
           {controller.error.responseMessage && (
             <ErrorMessage
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
index 5c43a26214..6a8f44515b 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
@@ -68,7 +68,7 @@ export class UserFormController implements IInitializableController, IDestructib
     this.selectedConnections = new Map();
     this.grantedConnections = [];
     this.isSaving = false;
-    this.isLoading = true;
+    this.isLoading = false;
     this.credentials = {
       login: '',
       password: '',
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
index 49bf875af7..ffe5ba2cae 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
@@ -7,10 +7,11 @@
  */
 
 import { observer } from 'mobx-react';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, useEffect, useRef } from 'react';
 import styled, { css } from 'reshadow';
 
 import {
+  Loader,
   TableContext
 } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
@@ -29,7 +30,7 @@ const styles = composes(
     box {
       box-sizing: border-box;
       padding: 24px;
-      min-height: 320px;
+      min-height: 420px;
       max-height: 500px;
       display: flex;
       flex-direction: column;
@@ -44,15 +45,23 @@ interface Props {
 export const UserEdit = observer(function UserEdit({
   item,
 }: Props) {
+  const boxRef = useRef<HTMLDivElement>(null);
   const controller = useController(UserEditController, item);
   const tableContext = useContext(TableContext);
   const collapse = useCallback(() => tableContext?.setItemExpand(item, false), [tableContext]);
 
+  useEffect(() => {
+    boxRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }, []);
+
   return styled(useStyles(styles))(
-    <box as='div'>
-      {controller.user && (
+    <box ref={boxRef} as='div'>
+      {controller.user ? (
         <UserForm user={controller.user} editing onCancel={collapse} />
-      )}
+      ) : <Loader />}
     </box>
   );
 });