import React, { useEffect } from 'react';
import classNames from 'classnames/bind';
import styles from './NetworkLoading.scss';

const cx = classNames.bind(styles);

const NetworkLoading = () => {
  useEffect(() => {
    document.body.style.cssText = `
            overflow: hidden;
        `;
    return () => {
      document.body.style.cssText = `
            overflow: scroll;
        `;
    };
  },[]);
  return (
            
    <div style={{ top: `${window.scrollY}px` }} className={cx('loading-container')}>
      <div className={cx('loading')} />
      <h3>네트워크 전송 시에는 다소 시간이 소요됩니다.<br/> 새로고침을 하는 경우 데이터 변경 감지가 어려우니 기다려주시기 바랍니다.</h3>
    </div>
  );

};

export default NetworkLoading;
