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

fixed comment loader animation

Browse source
This commit is contained in:
Fedor Katurov 2022-12-26 13:54:35 +06:00
parent 85f3de775a
commit c30ecc1b81
4 changed files with 56 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/node/NodeNoComments/index.tsx
View file

@ -9,20 +9,25 @@ import { t } from '~/utils/trans';
import styles from './styles.module.scss';
interface IProps {
is_loading?: boolean;
loading?: boolean;
count?: number;
}
const NodeNoComments: FC<IProps> = ({ is_loading = false, count = 3 }) => {
const NodeNoComments: FC<IProps> = ({ loading = false, count = 3 }) => {
const items = useMemo(
() => [...new Array(count)].map((_, i) => <div className={styles.card} key={i} />),
[count]
() =>
[...new Array(count)].map((_, i) => (
<div className={styles.card} key={i} />
)),
[count],
);
return (
<Group className={classNames(styles.wrap, { is_loading })}>
<Group className={classNames(styles.wrap, { [styles.loading]: loading })}>
{items}
{!is_loading && <div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>}
{!loading && (
<div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>
)}
</Group>
);
};

11
src/components/node/NodeNoComments/styles.module.scss
View file

@ -1,5 +1,14 @@
@import 'src/styles/variables';
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.wrap {
user-select: none;
overflow: hidden;
@ -17,7 +26,7 @@
bottom: 0;
}
&:global(.is_loading) {
&.loading {
opacity: 1;
.card {