로딩화면 크기, 위치 조정

cks
강석 최 2023-10-26 09:47:10 +09:00
parent 76b10125d0
commit cfa7dbf9c6
4 changed files with 18 additions and 19 deletions

View File

@ -2,20 +2,19 @@ import React from 'react';
import {Blocks} from "react-loader-spinner"; import {Blocks} from "react-loader-spinner";
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';
import {LoadingDiv} from "./Loading.style";
function Loading () { function Loading () {
return ( return (
<Row className="justify-content-center"> <LoadingDiv>
<Col xs="1"> <Blocks
<Blocks height="150"
height="80" width="150"
width="80" ariaLabel="blocks-loading"
ariaLabel="blocks-loading" wrapperStyle={{}}
wrapperStyle={{}} wrapperClass="blocks-wrapper"
wrapperClass="blocks-wrapper" />
/> </LoadingDiv>
</Col>
</Row>
) ; ) ;
}; };

View File

@ -0,0 +1,7 @@
import styled from 'styled-components'
export const LoadingDiv = styled.div`
min-height: 83vh;
padding-top: calc(40vh - 150px);
padding-left: calc(54vw - 150px);
`

View File

@ -1,5 +1,4 @@
import styled from "styled-components"; import styled from "styled-components";
import { Link } from 'react-router-dom';
// 사이드바 전체를 감싸는 div // 사이드바 전체를 감싸는 div
export const SbContainer = styled.div` export const SbContainer = styled.div`
@ -38,9 +37,3 @@ export const VwDiv = styled.div`
export const VwPtag = styled.p` export const VwPtag = styled.p`
cursor: ${props => (props.isTitle?'pointer':'')}; cursor: ${props => (props.isTitle?'pointer':'')};
`; `;
// 제일 하위메뉴에서 클릭할 Link
export const SbLink = styled(Link)`
color: inherit;
text-decoration: inherit;
`;

View File

@ -186,7 +186,7 @@ function CodeViewer(props) {
console.groupEnd("viewer"); console.groupEnd("viewer");
return ( return (
<> <>
{treeLoading && docLoading? (<Loading/>):( {treeLoading || docLoading? (<Loading/>):(
<Row className="mx-0"> <Row className="mx-0">
<Col xs={12} className="border-bottom"> <Col xs={12} className="border-bottom">
<Row> <Row>