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

fixed loading

Browse source
This commit is contained in:
Fedor Katurov 2019-11-15 15:37:57 +07:00
parent b0be1d82b6
commit 205af22aa7
2 changed files with 29 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -219,14 +219,19 @@ const NodeImageSlideBlock: FC<IProps> = ({
); );
return ( return (
<div className={classNames(styles.wrap, { is_loading })} ref={wrap}> <div
{is_loading && ( className={classNames(styles.wrap, { [styles.is_loading]: is_loading })}
<div className={styles.placeholder}> ref={wrap}
>
<div
className={classNames(styles.placeholder, {
[styles.is_loading]: is_loading || !loaded[current]
})}
>
<div> <div>
<LoaderCircle size={96} /> <LoaderCircle size={96} />
</div> </div>
</div> </div>
)}
{!is_loading && ( {!is_loading && (
<ImageSwitcher <ImageSwitcher

18
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -5,6 +5,12 @@
width: 100%; width: 100%;
transition: height 0.25s; transition: height 0.25s;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
.is_loading {
.placeholder {
opacity: 1;
}
}
} }
.image_container { .image_container {
@ -58,7 +64,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $content_bg; background: $content_bg;
z-index: 1; z-index: 0;
pointer-events: none;
touch-action: none;
transition: opacity 0.25s;
z-index: 2;
opacity: 0;
&.is_loading {
opacity: 1;
}
svg { svg {
opacity: 0.025; opacity: 0.025;
fill: white; fill: white;