added placeholders

src/components/lab/LabAudioBlock/index.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
+
+const LabAudio: FC<INodeComponentProps> = ({ node, isLoading }) => (
+  <Placeholder active={isLoading} width="100%" height={100}>
+    <NodeAudioBlock node={node} isLoading={isLoading} />
+  </Placeholder>
+);
+
+export { LabAudio };

src/components/lab/LabBottomPanel/index.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { Grid } from '~/components/containers/Grid';
 import { useHistory } from 'react-router';
 import { URLS } from '~/constants/urls';
+import { Placeholder } from '~/components/placeholders/Placeholder';
 
 type Props = {
   node: INode;
@@ -17,31 +18,38 @@ type Props = {
   commentCount: number;
 };
 
-const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => {
+const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount, isLoading }) => {
   const history = useHistory();
   const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
 
   return (
     <Group horizontal className={styles.wrap} onClick={onClick}>
-      <div className={styles.timestamp}>{getPrettyDate(node.created_at)}</div>
+      <div className={styles.timestamp}>
+        <Placeholder active={isLoading}>{getPrettyDate(node.created_at)}</Placeholder>
+      </div>
+
       <Filler />
 
-      {commentCount > 0 && (
-        <Grid
-          horizontal
-          className={classNames(styles.comments, { [styles.active]: hasNewComments })}
-        >
-          <Icon icon={hasNewComments ? 'comment_new' : 'comment'} size={24} />
-          <span>{commentCount}</span>
-        </Grid>
-      )}
+      <Placeholder active={isLoading} width="48px" height={24}>
+        {commentCount > 0 && (
+          <Grid
+            horizontal
+            className={classNames(styles.comments, { [styles.active]: hasNewComments })}
+          >
+            <Icon icon={hasNewComments ? 'comment_new' : 'comment'} size={24} />
+            <span>{commentCount}</span>
+          </Grid>
+        )}
+      </Placeholder>
 
-      {!!node.like_count && node.like_count > 0 && (
-        <Grid horizontal className={classNames(styles.like)}>
-          <Icon icon={node.is_liked ? 'heart_full' : 'heart'} size={24} />
-          <span>{node.like_count}</span>
-        </Grid>
-      )}
+      <Placeholder active={isLoading} width="48px" height={24}>
+        {!!node.like_count && node.like_count > 0 && (
+          <Grid horizontal className={classNames(styles.like)}>
+            <Icon icon={node.is_liked ? 'heart_full' : 'heart'} size={24} />
+            <span>{node.like_count}</span>
+          </Grid>
+        )}
+      </Placeholder>
     </Group>
   );
 };

src/components/lab/LabDescription/index.tsx

@@ -4,15 +4,20 @@ import styles from './styles.module.scss';
 import { Markdown } from '~/components/containers/Markdown';
 import { formatText } from '~/utils/dom';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { Paragraph } from '~/components/placeholders/Paragraph';
 
-const LabDescription: FC<INodeComponentProps> = ({ node }) => {
+const LabDescription: FC<INodeComponentProps> = ({ node, isLoading }) => {
   const onClick = useGotoNode(node.id);
 
   if (!node.description) {
     return null;
   }
 
-  return (
+  return isLoading ? (
+    <div className={styles.wrap}>
+      <Paragraph />
+    </div>
+  ) : (
     <Markdown
       className={styles.wrap}
       dangerouslySetInnerHTML={{ __html: formatText(node.description) }}

src/components/lab/LabImage/index.tsx

@@ -15,6 +15,7 @@ import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import SwiperClass from 'swiper/types/swiper-class';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { Placeholder } from '~/components/placeholders/Placeholder';
 
 SwiperCore.use([Navigation, Pagination, A11y]);
 
@@ -27,7 +28,7 @@ const breakpoints: SwiperOptions['breakpoints'] = {
   },
 };
 
-const LabImage: FC<IProps> = ({ node }) => {
+const LabImage: FC<IProps> = ({ node, isLoading }) => {
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
 
   const images = useNodeImages(node);
@@ -52,44 +53,46 @@ const LabImage: FC<IProps> = ({ node }) => {
 
   const onClick = useGotoNode(node.id);
 
-  if (!images?.length) {
+  if (!images?.length && !isLoading) {
     return null;
   }
 
   return (
-    <div className={styles.wrapper}>
-      <Swiper
-        initialSlide={0}
-        slidesPerView={images.length > 1 ? 1.1 : 1}
-        onSwiper={setControlledSwiper}
-        spaceBetween={10}
-        grabCursor
-        autoHeight
-        breakpoints={breakpoints}
-        observeSlideChildren
-        observeParents
-        resizeObserver
-        watchOverflow
-        updateOnImagesReady
-        onInit={resetSwiper}
-        keyboard={{
-          enabled: true,
-          onlyInViewport: false,
-        }}
-      >
-        {images.map(file => (
-          <SwiperSlide className={styles.slide} key={file.id}>
-            <img
-              className={styles.image}
-              src={getURL(file, PRESETS['1600'])}
-              alt={node.title}
-              onLoad={updateSwiper}
-              onClick={onClick}
-            />
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </div>
+    <Placeholder active={isLoading} width="100%" height={400}>
+      <div className={styles.wrapper}>
+        <Swiper
+          initialSlide={0}
+          slidesPerView={images.length > 1 ? 1.1 : 1}
+          onSwiper={setControlledSwiper}
+          spaceBetween={10}
+          grabCursor
+          autoHeight
+          breakpoints={breakpoints}
+          observeSlideChildren
+          observeParents
+          resizeObserver
+          watchOverflow
+          updateOnImagesReady
+          onInit={resetSwiper}
+          keyboard={{
+            enabled: true,
+            onlyInViewport: false,
+          }}
+        >
+          {images.map(file => (
+            <SwiperSlide className={styles.slide} key={file.id}>
+              <img
+                className={styles.image}
+                src={getURL(file, PRESETS['1600'])}
+                alt={node.title}
+                onLoad={updateSwiper}
+                onClick={onClick}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </Placeholder>
   );
 };
 

src/components/lab/LabNode/index.tsx

@@ -13,7 +13,7 @@ interface IProps {
 }
 
 const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
-  const { lab } = useNodeBlocks(node, false);
+  const { lab } = useNodeBlocks(node, !!isLoading);
 
   const hasNewComments = useMemo(
     () =>
@@ -26,7 +26,7 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
       {lab}
       <LabBottomPanel
         node={node}
-        isLoading={!!isLoading}
+        isLoading={isLoading}
         hasNewComments={hasNewComments}
         commentCount={commentCount}
       />

src/components/lab/LabNodeTitle/index.tsx

@@ -5,26 +5,28 @@ import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import Tippy from '@tippy.js/react';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { Placeholder } from '~/components/placeholders/Placeholder';
 
-interface IProps {
-  node: INode;
-}
-
-const LabNodeTitle: FC<IProps> = ({ node }) => {
+const LabNodeTitle: FC<INodeComponentProps> = ({ node, isLoading }) => {
   const onClick = useGotoNode(node.id);
 
   if (!node.title) return null;
 
   return (
     <Group horizontal className={styles.wrap} onClick={onClick}>
-      <div className={styles.title}>{node.title || '...'}</div>
+      <div className={styles.title}>
+        <Placeholder active={isLoading}>{node.title || '...'}</Placeholder>
+      </div>
 
-      {node.is_heroic && (
-        <Tippy content="Важный пост">
-          <div className={styles.star}>
-            <Icon icon="star_full" size={24} />
-          </div>
-        </Tippy>
+      {(node.is_heroic || isLoading) && (
+        <Placeholder active={isLoading} width="24px" height={24}>
+          <Tippy content="Важный пост">
+            <div className={styles.star}>
+              <Icon icon="star_full" size={24} />
+            </div>
+          </Tippy>
+        </Placeholder>
       )}
     </Group>
   );

src/components/lab/LabText/index.tsx

@@ -5,15 +5,20 @@ import { formatTextParagraphs } from '~/utils/dom';
 import { path } from 'ramda';
 import styles from './styles.module.scss';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { Paragraph } from '~/components/placeholders/Paragraph';
 
-const LabText: FC<INodeComponentProps> = ({ node }) => {
+const LabText: FC<INodeComponentProps> = ({ node, isLoading }) => {
   const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
     node.blocks,
   ]);
 
   const onClick = useGotoNode(node.id);
 
-  return (
+  return isLoading ? (
+    <div className={styles.wrap}>
+      <Paragraph lines={5} />
+    </div>
+  ) : (
     <Markdown
       dangerouslySetInnerHTML={{ __html: content }}
       className={styles.wrap}

src/components/lab/LabVideo/index.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+
+const LabVideo: FC<INodeComponentProps> = ({ node, isLoading }) => (
+  <Placeholder active={isLoading} width="100%" height={400}>
+    <NodeVideoBlock node={node} isLoading={isLoading} />
+  </Placeholder>
+);
+
+export { LabVideo };