muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed image load on PhotoSwipe

Browse source
This commit is contained in:
Fedor Katurov 2023-10-31 11:20:32 +06:00
parent 60acf8f14d
commit acacc42ccf
3 changed files with 7 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/common/ImageLoadingWrapper/index.tsx
View file

@ -1,9 +1,4 @@
import React, {
CSSProperties,
FC,
useMemo,
useReducer,
} from 'react';
import React, { CSSProperties, FC, useMemo, useReducer } from 'react';
import classNames from 'classnames';
@ -24,7 +19,7 @@ const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
color,
...props
}) => {
const [loading, onLoad] = useReducer((v) => false, true);
const [loading, onLoad] = useReducer(() => false, true);
const style = useMemo<CSSProperties>(
() => ({

3
src/components/node/NodeImageLazy/index.tsx
View file

@ -23,7 +23,7 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
if (file.url.endsWith('svg')) {
return (
<img
data-src={getURL(file, imagePresets[1600])}
data-src={getURL(file)}
className={className}
onClick={onClick}
onLoad={onLoad}
@ -36,6 +36,7 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
return (
<img
data-srcset={getFileSrcSet(file)}
data-src={getURL(file, imagePresets[1600])}
width={file.metadata?.width}
height={file.metadata?.height}
onLoad={onLoad}

10
src/components/node/NodeImageSwiperBlock/index.tsx
View file

@ -45,9 +45,7 @@ const lazy = {
};
const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
const [controlledSwiper, setControlledSwiper] = useState<
SwiperClass | undefined
>(undefined);
const [controlledSwiper, setControlledSwiper] = useState<SwiperClass>();
const showPhotoSwiper = useImageModal();
const { isOpened: isModalActive } = useModal();
@ -89,8 +87,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
useEffect(() => {
controlledSwiper?.slideTo(0, 0);
return () => controlledSwiper?.slideTo(0, 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [images, node?.id]);
}, [controlledSwiper, images, node.id]);
useEffect(() => {
if (isModalActive) {
@ -98,8 +95,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
} else {
controlledSwiper?.keyboard.enable();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isModalActive]);
}, [controlledSwiper?.keyboard, isModalActive]);
if (!images?.length) {
return null;