dynamically loading images for hero

src/components/containers/PageCover/styles.scss

@@ -26,7 +26,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(~/sprites/dots.svg) rgba(0, 0, 0, 0.5);
+    background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3);
   }
 
   @include tablet {

src/components/flow/FlowHero/index.tsx

@@ -7,14 +7,13 @@ import { getURL } from '~/utils/dom';
 import { withRouter, RouteComponentProps } from 'react-router';
 import { URLS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
-import { Filler } from '~/components/containers/Filler';
 
 type IProps = RouteComponentProps & {
   heroes: IFlowState['heroes'];
 };
 
 const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
-  const [limit, setLimit] = useState(Math.max(heroes.length, 10));
+  const [limit, setLimit] = useState(Math.min(heroes.length, 6));
   const [current, setCurrent] = useState(0);
   const [loaded, setLoaded] = useState([]);
   const timer = useRef(null);
@@ -31,6 +30,11 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     setCurrent(index > loaded.length - 2 ? loaded[0] : loaded[index + 1]);
   }, [loaded, current, setCurrent, timer]);
 
+  const onNextPress = useCallback(() => {
+    setLimit(Math.min(heroes.length, limit + 1));
+    onNext();
+  }, [onNext, heroes, limit, setLimit]);
+
   const onPrevious = useCallback(() => {
     clearTimeout(timer.current);
 
@@ -52,13 +56,13 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
   }, [loaded]);
 
   useEffect(() => {
-    setLimit(Math.max(heroes.length, limit));
+    setLimit(limit > 0 ? Math.min(heroes.length, limit) : heroes.length);
   }, [heroes, limit]);
 
   const stopSliding = useCallback(() => {
     clearTimeout(timer.current);
     timer.current = setTimeout(onNext, 3000);
-  }, [timer]);
+  }, [timer, onNext]);
 
   const onClick = useCallback(() => {
     if (!current) return;
@@ -66,6 +70,10 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     history.push(URLS.NODE_URL(current));
   }, [current]);
 
+  useEffect(() => {
+    console.log({ limit });
+  }, [limit]);
+
   return (
     <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
       <div className={styles.info}>
@@ -77,7 +85,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
           <div className={styles.button} onClick={onPrevious}>
             <Icon icon="left" />
           </div>
-          <div className={styles.button} onClick={onNext}>
+          <div className={styles.button} onClick={onNextPress}>
             <Icon icon="right" />
           </div>
         </div>

src/components/flow/FlowHero/styles.scss

@@ -28,7 +28,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url('~/sprites/dots.svg') rgba(0, 0, 0, 0.3);
+    background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
   }
 
   img {

src/sprites/stripes.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+	<defs>
+		<pattern id="pattern_KGiq8" patternUnits="userSpaceOnUse" width="3.5" height="3.5" patternTransform="rotate(45)">
+			<line x1="0" y="0" x2="0" y2="3.5" stroke="#000000" stroke-width="1" />
+		</pattern>
+	</defs>
+	<rect width="100%" height="100%" fill="url(#pattern_KGiq8)" opacity="1" />
+</svg>