opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: CB-574 loaders and content flickering

Browse Source
This commit is contained in:
Wroud
2020-11-30 22:18:44 +03:00
parent e89aecf35a
commit dec06239bf
8 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
+2 -2
View File
@@ -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>
);
});
webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx
-15
View File
@@ -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;
}
webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/OriginInfo/OriginInfo.tsx
+2 -2
View File
@@ -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>
);
});
webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+14 -6
View File
@@ -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>
);
});
webapp/packages/plugin-authentication/src/Administration/Users/UserForm/OriginInfo.tsx
+2 -2
View File
@@ -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>
);
});
webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserForm.tsx
+1 -1
View File
@@ -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
webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
+1 -1
View File
@@ -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: '',
webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
+14 -5
View File
@@ -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>
);
});