More responsive tab switching

3 files changed, 48 insertions, 41 deletions

diff --git a/package-lock.json b/package-lock.json
index 446cfc6..51d4439 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14732,6 +14732,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-timeout": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-timeout/-/use-timeout-1.1.0.tgz",
+      "integrity": "sha512-1veqpjjjHvjQ7qcMrz72HnL+6WgsehNFnFbdKNsSGWa+GcbjXrPrfFiBj/wtzHBBB8h5WO4B3O7i54NT8RIr6w=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/package.json b/package.json
index 079d0f5..8d2982d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-lazyload": "^3.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "use-timeout": "^1.1.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
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>
    );
 }