More responsive tab switching

1 files changed, 42 insertions, 41 deletions

diff --git a/src/App.js b/src/App.js
index 69ff38e..b89a532 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,7 @@ import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import Grow from '@material-ui/core/Grow';
 import LazyLoad from 'react-lazyload';
 import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
+import useTimeout from 'use-timeout'
 import { useWindowDimensions } from './utils.js';
 import 'pure-react-carousel/dist/react-carousel.es.css';
 import 'fontsource-roboto';
@@ -242,27 +243,27 @@ function StoreList(props) {
 
 function StoreView(props) {
    const [state, setState] = useState({data: [], loaded: false});
-   useEffect(() => {
-         async function fetchData() {
-            function getRandomInt(max) {
-               return Math.floor(Math.random() * Math.floor(max));
-            }
-            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
-            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
-               id: 'no-id',
-               author: he.decode(item.title),
-               title: he.decode(item.title),
-               shortdesc: 'foobar',
-               desc: 'foobar',
-               img: 'https:' + item.ssl_path,
-               cat: 'Misc',
-               price: getRandomInt(3000) + '円',
-               rating: getRandomInt(5),
-            }})
-            setState({data: result, loaded: true});
+   useTimeout(() => {
+      async function fetchData() {
+         function getRandomInt(max) {
+            return Math.floor(Math.random() * Math.floor(max));
          }
-         fetchData();
-   }, []);
+         var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
+         result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
+            id: 'no-id',
+            author: he.decode(item.title),
+            title: he.decode(item.title),
+            shortdesc: 'foobar',
+            desc: 'foobar',
+            img: 'https:' + item.ssl_path,
+            cat: 'Misc',
+            price: getRandomInt(3000) + '円',
+            rating: getRandomInt(5),
+         }})
+         setState({data: result, loaded: true});
+      }
+      fetchData();
+   }, 600);
 
    return (
      <>
@@ -275,27 +276,27 @@ function StoreView(props) {
 
 function LibraryView(props) {
    const [state, setState] = useState({data: [], loaded: false});
-   useEffect(() => {
-         async function fetchData() {
-            function getRandomInt(max) {
-               return Math.floor(Math.random() * Math.floor(max));
-            }
-            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
-            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
-               id: 'no-id',
-               author: he.decode(item.title),
-               title: he.decode(item.title),
-               shortdesc: 'foobar',
-               desc: 'foobar',
-               img: 'https:' + item.ssl_path,
-               cat: 'Misc',
-               price: getRandomInt(3000) + '円',
-               rating: getRandomInt(5),
-            }})
-            setState({data: result, loaded: true});
+   useTimeout(() => {
+      async function fetchData() {
+         function getRandomInt(max) {
+            return Math.floor(Math.random() * Math.floor(max));
          }
-         fetchData();
-   }, []);
+         var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
+         result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
+            id: 'no-id',
+            author: he.decode(item.title),
+            title: he.decode(item.title),
+            shortdesc: 'foobar',
+            desc: 'foobar',
+            img: 'https:' + item.ssl_path,
+            cat: 'Misc',
+            price: getRandomInt(3000) + '円',
+            rating: getRandomInt(5),
+         }})
+         setState({data: result, loaded: true});
+      }
+      fetchData();
+   }, 600);
 
    return (
      <>
@@ -432,7 +433,7 @@ function TopBar(props) {
                </StyledBadge>
             </IconButton>
          </Toolbar>
-         {props.search ? <ItemSearch/> : null}
+         <Collapse in={props.search} timeout='auto' unmountOnExit><ItemSearch/></Collapse>
       </AppBar>
    );
 }