Merge pull request velopert#151 from velopert/fix/write-performance

Optimize markdown render for editor by throttling

Author: velopert

src/components/base/Header.tsx

@@ -84,10 +84,10 @@ const Block = styled.div`
   height: 4rem;
 `;
 
-const StyledLink = styled(Link)`
-  display: flex;
-  align-items: center;
-`;
+// const StyledLink = styled(Link)`
+//   display: flex;
+//   align-items: center;
+// `;
 
 const SearchButton = styled(Link)`
   display: flex;

src/components/common/MarkdownRender.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import remark from 'remark';
-import htmlPlugin from 'remark-html';
+// import htmlPlugin from 'remark-html';
 import slug from 'remark-slug';
 import prismPlugin from '../../lib/remark/prismPlugin';
 import prismThemes from '../../lib/styles/prismThemes';
@@ -226,15 +226,11 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   const [element, setElement] = useState<RenderedElement>(null);
   const [hasTagError, setHasTagError] = useState(false);
+  const [delay, setDelay] = useState(25);
 
-  const applyElement = React.useMemo(() => {
-    return throttle(250, (el: any) => {
-      setElement(el);
-    });
-  }, []);
-
-  useEffect(() => {
-    remark()
+  const throttledUpdate = React.useMemo(() => {
+    return throttle(delay, (markdown: string) => {
+      remark()
       .use(remarkParse)
       .use(slug)
       .use(prismPlugin)
@@ -246,6 +242,11 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
       .use(katex)
       .use(stringify)
       .process(markdown, (err: any, file: any) => {
+        const lines = markdown.split(/\r\n|\r|\n/).length
+        const nextDelay = Math.max(Math.min(Math.floor(lines * 0.5), 1500), 22)
+        if (nextDelay !== delay) {
+          setDelay(nextDelay)
+        }
         const html = String(file);
 
         if (onConvertFinish) {
@@ -265,18 +266,17 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
         try {
           const el = parse(html);
           setHasTagError(false);
-          applyElement(el);
+          setElement(el);
         } catch (e) {}
-      });
-  }, [applyElement, editing, markdown, onConvertFinish]);
+    }, 1)
+    });
+  }, [delay, editing, onConvertFinish]);
+
 
-  // useEffect(() => {
-  //   if (editing) return;
-  //   const using = checkUsingMathjax(markdown);
-  //   if (using) {
-  //     loadMathjax();
-  //   }
-  // }, [html, element, markdown, editing]);
+
+  useEffect(() => {
+    throttledUpdate(markdown)    
+  }, [markdown, throttledUpdate]);
 
   return (
     <Typography>

src/components/common/ToggleSwitch.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import { useSpring, animated } from 'react-spring';
-import useDidMount from '../../lib/hooks/useDidMount';
+
 
 export type ToggleSwitchProps = {
   name?: string;

src/components/error/CrashErrorScreen.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import ErrorScreenTemplate from './ErrorScreenTemplate';
 import { undrawBugFixing } from '../../static/images';
 import { useHistory } from 'react-router-dom';

src/components/error/ErrorScreenTemplate.tsx

@@ -19,7 +19,7 @@ function ErrorScreenTemplate({
 }: ErrorScreenTemplateProps) {
   return (
     <Screen>
-      <img src={image} alt="error-image" />
+      <img src={image} alt="error" />
       <div className="message">{message}</div>
       {buttonText && (
         <div className="button-wrapper">

src/components/main/MainTemplate.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import palette from '../../lib/styles/palette';
-import { Link } from 'react-router-dom';
 
 const BackgroundStyle = createGlobalStyle`
   body {

src/components/post/PostHead.tsx

@@ -10,7 +10,6 @@ import PopupOKCancel from '../common/PopupOKCancel';
 import media from '../../lib/styles/media';
 import TagList from '../common/TagList';
 import { Link } from 'react-router-dom';
-import { LockIcon } from '../../static/svg';
 import PrivatePostLabel from '../common/PrivatePostLabel';
 import optimizeImage from '../../lib/optimizeImage';
 

src/components/setting/SettingUserProfile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
 import Button from '../common/Button';

src/components/velog/SideArea.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
-import palette from '../../lib/styles/palette';
 
 export type SideAreaProps = {
   children: React.ReactNode;

src/components/write/PublishPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 import PublishSection from './PublishSection';
 import palette from '../../lib/styles/palette';

src/components/write/TagInput.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
 import transitions from '../../lib/styles/transitions';
-import media, { mediaQuery } from '../../lib/styles/media';
+import { mediaQuery } from '../../lib/styles/media';
 import { useTransition, animated } from 'react-spring';
 
 export interface TagInputProps {

src/components/write/Toolbar.tsx

@@ -64,10 +64,10 @@ const ToolbarBlock = styled.div<{
   }
 `;
 
-const ToolbarGroup = styled.div`
-  display: flex;
-  height: 100%;
-`;
+// const ToolbarGroup = styled.div`
+//   display: flex;
+//   height: 100%;
+// `;
 
 const Heading = styled.div`
   font-size: 1rem;

src/components/write/WriteFooter.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Button from '../common/Button';
 import { MdArrowBack } from 'react-icons/md';
 import media from '../../lib/styles/media';
-import { useHistory } from 'react-router-dom';
+
 
 const WriteFooterBlock = styled.div`
   padding-left: 1rem;

src/containers/post/PostViewer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useCallback, useRef, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect, useCallback, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import {
   READ_POST,
   SinglePost,
@@ -27,12 +27,10 @@ import { getScrollTop, ssrEnabled } from '../../lib/utils';
 import UserProfile from '../../components/common/UserProfile';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 import styled from 'styled-components';
-import { useMount } from 'react-use';
 import PostSkeleton from '../../components/post/PostSkeleton';
 import media from '../../lib/styles/media';
 import useNotFound from '../../lib/hooks/useNotFound';
 import { Helmet } from 'react-helmet-async';
-import { RootState } from '../../modules';
 import { toast } from 'react-toastify';
 import MobileLikeButton from '../../components/post/MobileLikeButton';
 
@@ -93,11 +91,11 @@ const PostViewer: React.FC<PostViewerProps> = ({
   const [likePost, { loading: loadingLike }] = useMutation(LIKE_POST);
   const [unlikePost, { loading: loadingUnlike }] = useMutation(UNLIKE_POST);
   const { showNotFound } = useNotFound();
-  const userLogo = useSelector((state: RootState) => state.header.userLogo);
-  const velogTitle = useMemo(() => {
-    if (!userLogo || !userLogo.title) return `${username}.log`;
-    return userLogo.title;
-  }, [userLogo, username]);
+  // const userLogo = useSelector((state: RootState) => state.header.userLogo);
+  // const velogTitle = useMemo(() => {
+  //   if (!userLogo || !userLogo.title) return `${username}.log`;
+  //   return userLogo.title;
+  // }, [userLogo, username]);
   const user = useUser();
 
   const { error, data } = readPost;

src/containers/search/SearchResult.tsx

@@ -5,7 +5,6 @@ import { useQuery } from '@apollo/react-hooks';
 import { SearchPostsResponse, SEARCH_POSTS } from '../../lib/graphql/post';
 import useScrollPagination from '../../lib/hooks/useScrollPagination';
 import { safe } from '../../lib/utils';
-import styled from 'styled-components';
 import { Helmet } from 'react-helmet-async';
 // import { undrawSearching } from '../../static/images';
 
@@ -73,16 +72,5 @@ function SearchResult({ keyword, username }: SearchResultProps) {
   );
 }
 
-const ImageWrapper = styled.div`
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  display: flex;
-  justify-content: center;
-  img {
-    width: 16rem;
-    height: auto;
-    display: block;
-  }
-`;
 
 export default SearchResult;

src/containers/setting/SettingUserProfileContainer.tsx

@@ -11,9 +11,9 @@ export type SettingUserProfileContainerProps = {};
 
 function SettingUserProfileContainer(props: SettingUserProfileContainerProps) {
   const user = useUser();
-  const { profile, loading, update } = useUserProfile();
+  const { profile,  update } = useUserProfile();
   const [upload] = useUpload();
-  const [s3Upload, image, error] = useS3Upload();
+  const [s3Upload] = useS3Upload();
   const updateThumbnail = useUpdateThumbnail();
 
   const uploadThumbnail = async () => {

src/containers/velog/UserPosts.tsx

@@ -23,7 +23,7 @@ const UserPosts: React.FC<UserPostsProps> = ({ username, tag }) => {
     notifyOnNetworkStatusChange: true,
   });
 
-  const { data, error, loading } = getPostList;
+  const { data,  loading } = getPostList;
 
   const onLoadMore = useCallback(
     (cursor: string) => {

src/containers/write/ActiveEditor.tsx

@@ -2,12 +2,9 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { RootState } from '../../modules';
 import {
-  WriteMode,
   clearEditor,
   prepareEdit,
-  convertEditorMode,
   setInitialBody,
-  changeTitle,
   setInitialTitle,
 } from '../../modules/write';
 import EditorPanesContainer from './EditorPanesContainer';
@@ -28,7 +25,7 @@ export type ActiveEditorProps = {};
 
 const ActiveEditor: React.FC<ActiveEditorProps> = () => {
   const [newPost, setNewPost] = useState(false);
-  const mode = useSelector((state: RootState) => state.write.mode);
+  // const mode = useSelector((state: RootState) => state.write.mode);
   const postId = useSelector((state: RootState) => state.write.postId);
   const [askLoadTemp, setAskLoadTemp] = useState(false);
   const initialized = useRef(false);

src/containers/write/MarkdownEditorContainer.tsx

@@ -52,7 +52,6 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     title,
     markdown,
     thumbnail,
-    publish,
     postId,
     isTemp,
     initialBody,

src/containers/write/MarkdownPreviewContainer.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import MarkdownPreview from '../../components/write/MarkdownPreview';
 import { connect } from 'react-redux';
 import { RootState } from '../../modules';
-import styled from 'styled-components';
 
 interface OwnProps {}
 interface StateProps {

src/index.tsx

@@ -14,7 +14,7 @@ import rootReducer from './modules';
 import storage from './lib/storage';
 import { setUser } from './modules/core';
 import * as Sentry from '@sentry/browser';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import {  HelmetProvider } from 'react-helmet-async';
 
 Sentry.init({
   dsn: 'https://[email protected]/1886813',

src/modules/error.ts

@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 
 export type ErrorState = {
   errorType: 'NOT_FOUND' | 'CRASHED' | null;

src/pages/WritePage.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 
 import ActiveEditor from '../containers/write/ActiveEditor';
 import PublishScreen from '../containers/write/PublishScreen';
-import { Helmet } from 'react-helmet-async';
 
 const WritePageBlock = styled.div`
   width: 100%;

src/pages/home/RecentPostsPage.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import useRecentPosts from './hooks/useRecentPosts';
-import PostCardGrid, {
-  PostCardGridSkeleton,
-} from '../../components/common/PostCardGrid';
+import PostCardGrid from '../../components/common/PostCardGrid';
 import { Helmet } from 'react-helmet-async';
 
 export type RecentPostsPageProps = {};

src/pages/home/TrendingPostsPage.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import PostCardGrid, {
-  PostCardGridSkeleton,
-} from '../../components/common/PostCardGrid';
+import PostCardGrid from '../../components/common/PostCardGrid';
 import useTrendingPosts from './hooks/useTrendingPosts';
 import { Helmet } from 'react-helmet-async';
 

src/pages/readingList/ReadingListPage.tsx

@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import MainPageTemplate from '../../components/main/MainPageTemplate';
 import MainResponsive from '../../components/main/MainResponsive';
 import ReadingListTab from '../../components/readingList/ReadingListTab';
 import styled from 'styled-components';
 import { RouteComponentProps } from 'react-router-dom';
 import useReadingList from './hooks/useReadingList';
-import PostCardGrid, {
-  PostCardGridSkeleton,
-} from '../../components/common/PostCardGrid';
+import PostCardGrid from '../../components/common/PostCardGrid';
 import { undrawEmpty } from '../../static/images';
 import palette from '../../lib/styles/palette';
 import media from '../../lib/styles/media';
@@ -20,7 +18,7 @@ export type ReadingListPageProps = {} & RouteComponentProps<{
 function ReadingListPage({ match, history }: ReadingListPageProps) {
   const { type } = match.params;
 
-  const { data, loading, isFinished } = useReadingList(type);
+  const { data, isFinished } = useReadingList(type);
 
   return (
     <MainPageTemplate>

src/pages/velog/UserPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 import UserProfileContainer from '../../containers/velog/UserProfileContainer';