로딩화면 크기, 위치 조정

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 Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import {LoadingDiv} from "./Loading.style";
function Loading () {
return (
<Row className="justify-content-center">
<Col xs="1">
<Blocks
height="80"
width="80"
ariaLabel="blocks-loading"
wrapperStyle={{}}
wrapperClass="blocks-wrapper"
/>
</Col>
</Row>
<LoadingDiv>
<Blocks
height="150"
width="150"
ariaLabel="blocks-loading"
wrapperStyle={{}}
wrapperClass="blocks-wrapper"
/>
</LoadingDiv>
) ;
};

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 { Link } from 'react-router-dom';
// 사이드바 전체를 감싸는 div
export const SbContainer = styled.div`
@ -37,10 +36,4 @@ export const VwDiv = styled.div`
export const VwPtag = styled.p`
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");
return (
<>
{treeLoading && docLoading? (<Loading/>):(
{treeLoading || docLoading? (<Loading/>):(
<Row className="mx-0">
<Col xs={12} className="border-bottom">
<Row>