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,15 +18,19 @@ 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 />
 
+      <Placeholder active={isLoading} width="48px" height={24}>
         {commentCount > 0 && (
           <Grid
             horizontal
@@ -35,13 +40,16 @@ const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => {
             <span>{commentCount}</span>
           </Grid>
         )}
+      </Placeholder>
 
+      <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,11 +53,12 @@ const LabImage: FC<IProps> = ({ node }) => {
 
   const onClick = useGotoNode(node.id);
 
-  if (!images?.length) {
+  if (!images?.length && !isLoading) {
     return null;
   }
 
   return (
+    <Placeholder active={isLoading} width="100%" height={400}>
       <div className={styles.wrapper}>
         <Swiper
           initialSlide={0}
@@ -90,6 +92,7 @@ const LabImage: FC<IProps> = ({ node }) => {
           ))}
         </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 && (
+      {(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 };

src/components/placeholders/Paragraph/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useMemo } from 'react';
+import { Placeholder, PlaceholderProps } from '~/components/placeholders/Placeholder';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+
+type Props = PlaceholderProps & {
+  lines?: number;
+  wordsLimit?: number;
+};
+
+const Paragraph: FC<Props> = ({ lines = 3, wordsLimit = 12, ...props }) => {
+  const iters = useMemo(
+    () =>
+      [...new Array(lines)].map(() =>
+        [...new Array(Math.ceil(Math.random() * wordsLimit))].map((_, i) => i)
+      ),
+    [lines, wordsLimit]
+  );
+
+  console.log({ iters });
+
+  return (
+    <Group>
+      {iters.map(words => (
+        <div className={styles.para}>
+          {words.map(word => (
+            <Placeholder key={word} width={`${Math.round(Math.random() * 120) + 60}px`} active />
+          ))}
+        </div>
+      ))}
+    </Group>
+  );
+};
+
+export { Paragraph };

src/components/placeholders/Paragraph/styles.module.scss

@@ -0,0 +1,12 @@
+@import "src/styles/variables";
+
+.para {
+  display: flex;
+  flex-wrap: wrap;
+
+  div {
+    display: inline-flex;
+    margin-right: $gap;
+    margin-top: $gap;
+  }
+}

src/components/placeholders/ParagraphPlaceholder/index.tsx

@@ -1,28 +0,0 @@
-import React, { FC } from 'react';
-import { Placeholder } from '~/components/placeholders/Placeholder';
-import styles from './styles.module.scss';
-import { Group } from '~/components/containers/Group';
-
-const ParagraphPlaceholder = ({}) => (
-  <Group>
-    <div className={styles.para}>
-      <Placeholder width="120px" />
-      <Placeholder width="60px" />
-      <Placeholder width="30px" />
-      <Placeholder width="70px" />
-      <Placeholder width="160px" />
-      <Placeholder width="30px" />
-    </div>
-
-    <div className={styles.para}>
-      <Placeholder width="40px" />
-      <Placeholder width="30px" />
-      <Placeholder width="120px" />
-      <Placeholder width="70px" />
-      <Placeholder width="160px" />
-      <Placeholder width="30px" />
-    </div>
-  </Group>
-);
-
-export { ParagraphPlaceholder };

src/components/placeholders/ParagraphPlaceholder/styles.module.scss

@@ -1,12 +0,0 @@
-@import "src/styles/variables";
-
-.para {
-  display: grid;
-  grid-template-columns: auto;
-  grid-auto-columns: auto;
-  grid-template-rows: 1fr;
-  grid-column-gap: $gap;
-  grid-auto-flow: column;
-
-  div { display: inline-flex; margin-right: $gap; }
-}

src/components/placeholders/Placeholder/index.tsx

@@ -1,14 +1,31 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
 
-interface IProps {
+export interface PlaceholderProps {
   width?: string;
   height?: number;
   color?: string;
+  active?: boolean;
+  loading?: boolean;
 }
 
-const Placeholder: FC<IProps> = ({ width = '120px', height, color }) => (
-  <div className={styles.placeholder} style={{ height, color, width }} />
+const Placeholder: FC<PlaceholderProps> = ({
+  width = '120px',
+  height,
+  color,
+  active,
+  children,
+  loading = true,
+}) => {
+  return active ? (
+    <div
+      className={classNames(styles.placeholder, { [styles.loading]: loading })}
+      style={{ height, color, width }}
+    />
+  ) : (
+    <>{children}</>
   );
+};
 
 export { Placeholder };

src/components/placeholders/Placeholder/styles.module.scss

@@ -1,8 +1,31 @@
 @import "src/styles/variables";
 
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0.05;
+  }
+}
 .placeholder {
   height: 1em;
   width: 120px;
   background: $placeholder_bg;
   border-radius: 1em;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: ' ';
+    width: 200%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: white;
+    animation: fade 0.5s infinite alternate;
+    border-radius: 1em;
+  }
 }

src/containers/lab/LabGrid/index.tsx

@@ -2,12 +2,38 @@ import React, { FC } from 'react';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import styles from './styles.module.scss';
 import { LabNode } from '~/components/lab/LabNode';
-import { selectLabListNodes } from '~/redux/lab/selectors';
+import { selectLabList, selectLabListNodes } from '~/redux/lab/selectors';
+import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
+import { values } from 'ramda';
 
 interface IProps {}
 
+const getRandomNodeType = () =>
+  values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)];
+
+const LoadingNode = () => (
+  <LabNode
+    node={{ ...EMPTY_NODE, type: getRandomNodeType() }}
+    isLoading
+    lastSeen=""
+    commentCount={0}
+  />
+);
+
 const LabGrid: FC<IProps> = () => {
   const nodes = useShallowSelect(selectLabListNodes);
+  const { is_loading } = useShallowSelect(selectLabList);
+
+  if (is_loading) {
+    return (
+      <div className={styles.wrap}>
+        <LoadingNode />
+        <LoadingNode />
+        <LoadingNode />
+        <LoadingNode />
+      </div>
+    );
+  }
 
   return (
     <div className={styles.wrap}>

src/redux/node/constants.ts

@@ -20,6 +20,8 @@ import { LabText } from '~/components/lab/LabText';
 import { LabImage } from '~/components/lab/LabImage';
 import { LabPad } from '~/components/lab/LabPad';
 import { LabDescription } from '~/components/lab/LabDescription';
+import { LabVideo } from '~/components/lab/LabVideo';
+import { LabAudio } from '~/components/lab/LabAudioBlock';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -90,8 +92,8 @@ export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeCompone
 
 export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
   [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
-  [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle, LabDescription],
-  [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, NodeAudioBlock, LabPad],
+  [NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription],
+  [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, LabAudio, LabPad],
   [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
 };