feat: loading style

This commit is contained in:
chenos 2021-08-25 23:24:00 +08:00
parent 06fa41fffc
commit 0c678a013f
10 changed files with 36 additions and 17 deletions

View File

@ -16,7 +16,7 @@ export const AuthContext = createContext<AuthContextProps>(null);
export const useCurrentUser = () => {
const { currentUser } = useContext(AuthContext);
return currentUser;
}
};
export function AuthProvider(props) {
const service = useRequest('users:check', {
@ -30,7 +30,11 @@ export function AuthProvider(props) {
}
return (
<AuthContext.Provider value={{ service, currentUser: service.data }}>
{service.loading ? <Spin /> : props.children}
{service.loading ? (
<Spin size={'large'} className={'nb-spin-center'} />
) : (
props.children
)}
</AuthContext.Provider>
);
}

View File

@ -25,7 +25,7 @@ const useOkAction = () => {
async run() {
console.log('system_settings.values', form.values);
await resource.save(form.values);
await service.refresh();
await service.mutate(form.values);
},
};
};

View File

@ -44,7 +44,7 @@ export const MenuPermissionTable = observer((props) => {
},
});
if (loading) {
return <Spin />;
return <Spin size={'large'} className={'nb-spin-center'} />;
}
return (
<div>

View File

@ -25,7 +25,7 @@ export function SystemSettingsProvider(props) {
);
return (
<SystemSettingsContext.Provider value={{ service, resource }}>
{service.loading ? <Spin /> : props.children}
{service.loading ? <Spin size={'large'} className={'nb-spin-center'} /> : props.children}
</SystemSettingsContext.Provider>
);
}

View File

@ -76,7 +76,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
const history = useHistory();
const { title } = useSystemSettings();
const [activeKey, setActiveKey] = useState(match.params.name);
const [, setPageTitle] = usePageTitleContext();
const { setPageTitle } = usePageTitleContext();
const onSelect = (info) => {
if (!info.schema) {
setActiveKey(null);
@ -149,7 +149,7 @@ function Content({ activeKey }) {
);
if (loading) {
return <Spin />;
return <Spin size={'large'} className={'nb-spin-center'} />;
}
return <SchemaRenderer schema={data} />;
@ -166,7 +166,7 @@ export function AdminLayout({ route, ...others }: any) {
);
if (loading) {
return <Spin />;
return <Spin size={'large'} className={'nb-spin-center'} />;
}
const findProperties = (schema: Schema): Schema[] => {

View File

@ -33,6 +33,18 @@
// }
// }
.nb-spin-center {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
max-height: inherit !important;
}
.database-sider {
background: #fafafa;
padding-top: 16px;

View File

@ -59,7 +59,7 @@ export function RouteSchemaRenderer({ route }) {
);
const { title } = useSystemSettings();
if (loading) {
return <Spin />;
return <Spin size={'large'} className={'nb-spin-center'} />;
}
return (
<div>

View File

@ -6,10 +6,13 @@ export interface PageTitleProviderProps {
defaultPageTitle?: string;
}
const [PageTitleProvider, usePageTitleContext] = constate(({ defaultPageTitle }: PageTitleProviderProps) => {
const { title } = useSystemSettings();
const [pageTitle, setPageTitle] = useState(defaultPageTitle);
return [title ? `${pageTitle} - ${title}` : pageTitle, setPageTitle];
});
const [PageTitleProvider, usePageTitleContext] = constate(
({ defaultPageTitle }: PageTitleProviderProps) => {
const { title } = useSystemSettings();
const [pageTitle, setPageTitle] = useState(defaultPageTitle);
const documentTitle = title ? `${pageTitle} - ${title}` : pageTitle;
return { documentTitle, pageTitle, setPageTitle };
},
);
export { PageTitleProvider, usePageTitleContext };

View File

@ -46,7 +46,7 @@ const App = () => {
});
if (loading) {
return <Spin/>
return <Spin size={'large'} className={'nb-spin-center'} />
}
return (

View File

@ -6,11 +6,11 @@ import { Helmet } from 'react-helmet';
export const Page = observer((props) => {
const { children, ...others } = props;
const [pageTitle] = usePageTitleContext();
const { documentTitle, pageTitle } = usePageTitleContext();
return (
<>
<Helmet>
<title>{pageTitle}</title>
<title>{documentTitle}</title>
</Helmet>
<AntdPageHeader ghost={false} title={pageTitle} {...others} />
<div style={{margin: 24}}>