리액트 로딩중 표시 질문입니다.

function App() {

  const [shoes, setShoes] = useState(Data);
  const [show, setShow] = useState(true);

  return (
    <div className="App">
    
      <Navbar bg="light" expand="lg" className="">
        <Navbar.Brand href="#home">Australia Travel</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link as={Link} to="/">Home</Nav.Link>
            <Nav.Link as={Link} to="/detail">Detail</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      
      {/* 매칭되는것들을 다 보여주기때문에 exact이용 */}
      {/* exact 정확하게 이름에 해당하는 페이지것만 가져옴 */}
      {/* 이 안에 지저분한것들을 모두 컴포넌트화 시키면 더 깔끔해질것임 */}
          
     {/* ---메인페이지--- */}
      <Route exact path="/">
        <Jumbotron className="background">
          <h1>30% Season OFF</h1>
          <p>
            This is a simple hero unit, a simple jumbotron-style component for
            calling extra attention to featured content or information.
          </p>
        </Jumbotron>

        <div className="arrangeBtn">
          <button onClick={( ) => {

            let list = shoes.sort((a, b) => {
              return a.price - b.price;
            });
            
            setShoes([...list]) // 깊은 복사를 함

          } } width="100%" className="btn" style={{border:"3px solid red",padding:"10px 20px"}}> 가격 낮은순으로 정렬 </button>
         </div>

        {/* 신발 설명 */}
        <div className="container">
          <div className="row">
            {
              shoes.map( (a, i) => 
                return <Compo shoes={shoes[i]} i={i} key={i} /> 
              })  
            }
          </div> 
          <button className="btn btn-primary" onClick={() => {

            /////////로딩중입니다라는 알림창
            setShow(true);
            <Loading></Loading>
            axios.get('https://codingapple1.github.io/shop/data2.json')
            .then( (result) => { /* ajax로 가져온 자료 출력 성공하면 then */
              ////////// 로딩중 UI 삭제
              setShow(false);
              <Loading></Loading>
              setShoes( [...shoes, ...result.data] )
             
            }) 
            .catch( () => { /* ajax로 가져온 자료 출력 실패하면 catch */
              //////////// 로딩중 UI 삭제
              setShow(false);
              <Loading></Loading>
              console.log('실패했어요ㅜㅜ');
            }) 
      
         
         }}> 더보기 </button>
        </div>
      </Route>
    
      <Route path="/detail/:id">
        <Detail shoes={shoes}/>
      </Route>

    </div>
  );
}

function Compo(props) {

  useEffect(() => {
    console.log('Compo의 useEffect');
    return (
      console.log("Compo의 useEffect의 return문")
    );
  }, [])

  return (
    <>
     
      <div className="col-md-4"> 
     
        <img src={"https://codingapple1.github.io/shop/shoes" + (props.shoes.id+1) +".jpg"} width="100%"/>
        <h4> {props.shoes.title} </h4>
        <p> {props.shoes.content} & {props.shoes.price}원 </p>
      </div>
    </>
  );
}

function Loading(props) {
  return (
    <div>
      <h2>{show === true? 로딩중입니다 : null}</h2>
    </div>
  )
}

export default App;

위와 같이 state를 만들고

Loading 컴포넌트를 만들어 show값이 true인지 false인지에따라  로딩중인지 null인지를 파악해보는 코드를 나름짜봤습니다.

그전것들과 약간 뒤틀리면 응용이 힘드네요ㅜ  

.then()부분과 .catch()부분 그리고 컴포넌트 부분이 맞는지 확신이 안들어 질문 남깁니다.

감사합니다