optimized scrolls

src/components/containers/BlurWrapper/styles.scss

@@ -1,7 +1,7 @@
 .blur {
   filter: blur(0);
   transition: filter 0.25s;
-  max-height: 100vh;
+  // max-height: 100vh;
-  width: 100vw;
+  // width: 100vw;
-  overflow: visible auto;
+  // overflow: visible auto;
 }

src/components/containers/CommentWrapper/styles.scss

@@ -55,6 +55,7 @@
   border-radius: $panel_radius 0 0 $panel_radius;
   background-size: cover;
   flex: 0 0 $comment_height;
+  will-change: transform;
 
   @include tablet {
     height: 32px;

src/components/containers/PageCover/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import * as styles from './styles.scss';
 import { createPortal } from 'react-dom';
 import { selectNode } from '~/redux/node/selectors';
@@ -10,7 +10,7 @@ const mapStateToProps = state => pick(['current_cover_image'], selectNode(state)
 
 type IProps = ReturnType<typeof mapStateToProps> & {};
 
-const PageCoverUnconnected: FC<IProps> = ({ current_cover_image }) =>
+const PageCoverUnconnected: FC<IProps> = memo(({ current_cover_image }) =>
   current_cover_image
     ? createPortal(
         <div
@@ -19,7 +19,8 @@ const PageCoverUnconnected: FC<IProps> = ({ current_cover_image }) =>
         />,
         document.body
       )
-    : null;
+    : null
+);
 
 const PageCover = connect(mapStateToProps)(PageCoverUnconnected);
 export { PageCover };

src/components/containers/PageCover/styles.scss

@@ -17,6 +17,7 @@
   width: 100%;
   height: 100%;
   animation: fadeIn 2s;
+  will-change: transform, opacity;
 
   &::after {
     content: ' ';

src/components/editors/EditorUploadCoverButton/styles.scss

@@ -50,6 +50,7 @@
   border-radius: ($upload_button_height / 2) !important;
   background: 50% 50% no-repeat;
   background-size: cover;
+  will-change: transform;
   display: flex;
   align-items: center;
   flex-direction: row;

src/components/flow/Cell/styles.scss

@@ -110,6 +110,7 @@
   border-radius: $cell_radius + 2px;
   opacity: 0;
   transition: opacity 0.5s;
+  will-change: transform;
 
   & > img {
     opacity: 0;

src/components/flow/HeroPlaceholder/style.scss

@@ -1,9 +1,11 @@
 .container {
   height: 280px;
   width: 100%;
-  background: transparentize(white, 0.9) url("http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg") no-repeat 50% 30%;
+  background: transparentize(white, 0.9)
+    url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
   background-size: cover;
   opacity: 0.7;
+  will-change: transform;
   //box-shadow: white 0 0 0 1px;
   //border-radius: $panel_radius $panel_radius 0 0;
 }

src/components/main/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, memo } from 'react';
 import { connect } from 'react-redux';
 import { push as historyPush } from 'connected-react-router';
 import { Link } from 'react-router-dom';
@@ -25,7 +25,7 @@ const mapDispatchToProps = {
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
+const HeaderUnconnected: FC<IProps> = memo(({ user: { username, is_user, photo }, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
 
   return (
@@ -54,7 +54,7 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, sho
       )}
     </div>
   );
-};
+});
 
 const Header = connect(
   mapStateToProps,

src/components/media/AudioPlayer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, memo } from 'react';
 import { connect } from 'react-redux';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
@@ -25,76 +25,85 @@ type Props = ReturnType<typeof mapStateToProps> &
     file: IFile;
   };
 
-const AudioPlayerUnconnected = ({
+const AudioPlayerUnconnected = memo(
-  file,
+  ({
-  player: { file: current, status },
+    file,
+    player: { file: current, status },
+    playerSetFileAndPlay,
+    playerPlay,
+    playerPause,
+    playerSeek,
+  }: Props) => {
+    const [playing, setPlaying] = useState(false);
+    const [progress, setProgress] = useState<IPlayerProgress>({
+      progress: 0,
+      current: 0,
+      total: 0,
+    });
 
-  playerSetFileAndPlay,
+    const onPlay = useCallback(() => {
-  playerPlay,
+      if (current && current.id === file.id) {
-  playerPause,
+        if (status === PLAYER_STATES.PLAYING) return playerPause();
-  playerSeek,
+        return playerPlay();
-}: Props) => {
+      }
-  const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
 
-  const onPlay = useCallback(() => {
+      playerSetFileAndPlay(file);
-    if (current && current.id === file.id) {
+    }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
-      if (status === PLAYER_STATES.PLAYING) return playerPause();
-      return playerPlay();
-    }
 
-    playerSetFileAndPlay(file);
+    const onProgress = useCallback(
-  }, [file, current, status, playerPlay, playerPause, playerSetFileAndPlay]);
+      ({ detail }: { detail: IPlayerProgress }) => {
+        if (!detail || !detail.total) return;
+        setProgress(detail);
+      },
+      [setProgress]
+    );
 
-  const onProgress = useCallback(
+    const onSeek = useCallback(
-    ({ detail }: { detail: IPlayerProgress }) => {
+      event => {
-      if (!detail || !detail.total) return;
+        event.stopPropagation();
-      setProgress(detail);
+        const { clientX, target } = event;
-    },
+        const { left, width } = target.getBoundingClientRect();
-    [setProgress]
+        playerSeek((clientX - left) / width);
-  );
+      },
+      [playerSeek]
+    );
 
-  const onSeek = useCallback(
+    useEffect(() => {
-    event => {
+      const active = current && current.id === file.id;
-      event.stopPropagation();
+      setPlaying(current && current.id === file.id);
-      const { clientX, target } = event;
-      const { left, width } = target.getBoundingClientRect();
-      playerSeek((clientX - left) / width);
-    },
-    [playerSeek]
-  );
 
-  useEffect(() => {
+      if (active) Player.on('playprogress', onProgress);
-    const active = current && current.id === file.id;
-    setPlaying(current && current.id === file.id);
 
-    if (active) Player.on('playprogress', onProgress);
+      return () => {
+        if (active) Player.off('playprogress', onProgress);
+      };
+    }, [file, current, setPlaying, onProgress]);
 
-    return () => {
+    const title =
-      if (active) Player.off('playprogress', onProgress);
+      file.metadata &&
-    };
+      (file.metadata.title ||
-  }, [file, current, setPlaying, onProgress]);
+        [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
 
-  const title =
+    return (
-    file.metadata &&
+      <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
-    (file.metadata.title ||
+        <div className={styles.playpause}>
-      [file.metadata.id3artist, file.metadata.id3title].filter(el => !!el).join(' - '));
+          {playing && status === PLAYER_STATES.PLAYING ? (
+            <Icon icon="pause" />
+          ) : (
+            <Icon icon="play" />
+          )}
+        </div>
+        <div className={styles.content}>
+          <div className={styles.title}>{title || 'Unknown'}</div>
 
-  return (
+          <div className={styles.progress} onClick={onSeek}>
-    <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
+            <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
-      <div className={styles.playpause}>
+          </div>
-        {playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
-      </div>
-      <div className={styles.content}>
-        <div className={styles.title}>{title || 'Unknown'}</div>
-
-        <div className={styles.progress} onClick={onSeek}>
-          <div className={styles.bar} style={{ width: `${progress.progress}%` }} />
         </div>
       </div>
-    </div>
+    );
-  );
+  }
-};
+);
 
 export const AudioPlayer = connect(
   mapStateToProps,

src/components/node/Comment/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { ICommentGroup } from '~/redux/types';
 import { getURL } from '~/utils/dom';
@@ -12,30 +12,25 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   is_same?: boolean;
 };
 
-const Comment: FC<IProps> = ({
+const Comment: FC<IProps> = memo(
-  comment_group,
+  ({ comment_group, is_empty, is_same, is_loading, className, ...props }) => {
-  is_empty,
+    return (
-  is_same,
+      <CommentWrapper
-  is_loading,
+        className={className}
-  className,
+        is_empty={is_empty}
-  ...props
+        is_loading={is_loading}
-}) => {
+        user={comment_group.user}
-  return (
+        is_same={is_same}
-    <CommentWrapper
+        {...props}
-      className={className}
+      >
-      is_empty={is_empty}
+        <div className={styles.wrap}>
-      is_loading={is_loading}
+          {comment_group.comments.map(comment => (
-      user={comment_group.user}
+            <CommentContent comment={comment} key={comment.id} />
-      is_same={is_same}
+          ))}
-      {...props}
+        </div>
-    >
+      </CommentWrapper>
-      <div className={styles.wrap}>
+    );
-        {comment_group.comments.map(comment => (
+  }
-          <CommentContent comment={comment} key={comment.id} />
+);
-        ))}
-      </div>
-    </CommentWrapper>
-  );
-};
 
 export { Comment };

src/components/node/CommentContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, memo } from 'react';
 import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
@@ -15,7 +15,7 @@ interface IProps {
   comment: IComment;
 }
 
-const CommentContent: FC<IProps> = ({ comment }) => {
+const CommentContent: FC<IProps> = memo(({ comment }) => {
   const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
     () =>
       reduce(
@@ -68,7 +68,7 @@ const CommentContent: FC<IProps> = ({ comment }) => {
       )}
     </>
   );
-};
+});
 
 export { CommentContent };
 

src/components/node/NodeAudioImageBlock/styles.scss

@@ -29,4 +29,5 @@
   background: no-repeat 50% 30%;
   background-size: cover;
   z-index: 1;
+  will-change: transform;
 }