1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00

fixed rerendering issues on flow

This commit is contained in:
Fedor Katurov 2022-01-25 11:06:03 +07:00
parent 27763be864
commit a497912049
3 changed files with 16 additions and 13 deletions

View file

@ -1,6 +1,5 @@
import React, { FC, useCallback, useMemo, useState } from 'react'; import React, { FC, useCallback, useMemo, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper'; import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
@ -22,6 +21,18 @@ interface Props {
heroes: IFlowNode[]; heroes: IFlowNode[];
} }
const autoplay = {
delay: 3000,
pauseOnMouseEnter: false,
stopOnLastSlide: false,
disableOnInteraction: false,
};
const lazy = {
loadPrevNextAmount: 5,
checkInView: false,
};
export const FlowSwiperHero: FC<Props> = ({ heroes }) => { export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
const { innerWidth } = useWindowSize(); const { innerWidth } = useWindowSize();
const { push } = useNavigation(); const { push } = useNavigation();
@ -104,18 +115,10 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
effect="fade" effect="fade"
speed={3000} speed={3000}
className={styles.swiper} className={styles.swiper}
lazy={{ lazy={lazy}
loadPrevNextAmount: 5,
checkInView: false,
}}
loop loop
slidesPerView={1} slidesPerView={1}
autoplay={{ autoplay={autoplay}
delay: 3000,
pauseOnMouseEnter: false,
stopOnLastSlide: false,
disableOnInteraction: false,
}}
runCallbacksOnInit runCallbacksOnInit
onSwiper={setControlledSwiper} onSwiper={setControlledSwiper}
onSlidesLengthChange={onIndexChange} onSlidesLengthChange={onIndexChange}

View file

@ -14,7 +14,7 @@ export const useWindowSize = () => {
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize);
}); }, []);
return size; return size;
}; };

View file

@ -10,7 +10,7 @@ import { FlowLayout } from '~/layouts/FlowLayout';
import { FlowProvider } from '~/utils/providers/FlowProvider'; import { FlowProvider } from '~/utils/providers/FlowProvider';
import { getPageTitle } from '~/utils/ssr/getPageTitle'; import { getPageTitle } from '~/utils/ssr/getPageTitle';
export const getStaticProps = async () => { export const getStaticProps = async ctx => {
const fallbackData = await getNodeDiff({ const fallbackData = await getNodeDiff({
start: new Date().toISOString(), start: new Date().toISOString(),
end: new Date().toISOString(), end: new Date().toISOString(),