optimized scrolls

src/components/containers/BlurWrapper/styles.scss

@@ -1,7 +1,7 @@
 .blur {
   filter: blur(0);
   transition: filter 0.25s;
-  max-height: 100vh;
-  width: 100vw;
-  overflow: visible auto;
+  // max-height: 100vh;
+  // width: 100vw;
+  // 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,17 +25,21 @@ type Props = ReturnType<typeof mapStateToProps> &
     file: IFile;
   };
 
-const AudioPlayerUnconnected = ({
+const AudioPlayerUnconnected = memo(
+  ({
     file,
     player: { file: current, status },
-
     playerSetFileAndPlay,
     playerPlay,
     playerPause,
     playerSeek,
-}: Props) => {
+  }: Props) => {
     const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState<IPlayerProgress>({ progress: 0, current: 0, total: 0 });
+    const [progress, setProgress] = useState<IPlayerProgress>({
+      progress: 0,
+      current: 0,
+      total: 0,
+    });
 
     const onPlay = useCallback(() => {
       if (current && current.id === file.id) {
@@ -83,7 +87,11 @@ const AudioPlayerUnconnected = ({
     return (
       <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
         <div className={styles.playpause}>
-        {playing && status === PLAYER_STATES.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />}
+          {playing && status === PLAYER_STATES.PLAYING ? (
+            <Icon icon="pause" />
+          ) : (
+            <Icon icon="play" />
+          )}
         </div>
         <div className={styles.content}>
           <div className={styles.title}>{title || 'Unknown'}</div>
@@ -94,7 +102,8 @@ const AudioPlayerUnconnected = ({
         </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,14 +12,8 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   is_same?: boolean;
 };
 
-const Comment: FC<IProps> = ({
-  comment_group,
-  is_empty,
-  is_same,
-  is_loading,
-  className,
-  ...props
-}) => {
+const Comment: FC<IProps> = memo(
+  ({ comment_group, is_empty, is_same, is_loading, className, ...props }) => {
     return (
       <CommentWrapper
         className={className}
@@ -36,6 +30,7 @@ const Comment: FC<IProps> = ({
         </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;
 }