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, { import React, { CSSProperties, FC, useMemo, useReducer } from 'react';
CSSProperties,
FC,
useMemo,
useReducer,
} from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
@ -24,7 +19,7 @@ const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
color, color,
...props ...props
}) => { }) => {
const [loading, onLoad] = useReducer((v) => false, true); const [loading, onLoad] = useReducer(() => false, true);
const style = useMemo<CSSProperties>( 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')) { if (file.url.endsWith('svg')) {
return ( return (
<img <img
data-src={getURL(file, imagePresets[1600])} data-src={getURL(file)}
className={className} className={className}
onClick={onClick} onClick={onClick}
onLoad={onLoad} onLoad={onLoad}
@ -36,6 +36,7 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
return ( return (
<img <img
data-srcset={getFileSrcSet(file)} data-srcset={getFileSrcSet(file)}
data-src={getURL(file, imagePresets[1600])}
width={file.metadata?.width} width={file.metadata?.width}
height={file.metadata?.height} height={file.metadata?.height}
onLoad={onLoad} onLoad={onLoad}

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

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