chore: move waypoint load to client

Author: mydearxym

src/components/CustomScroller/HorizontalScroller.tsx

@@ -6,12 +6,12 @@
 
 import { FC, useState, useRef, useCallback, memo } from 'react'
 import { useTheme } from 'styled-components'
-import { Waypoint } from 'react-waypoint'
 import type { TThemeMap } from '@/spec'
 
 import { buildLog } from '@/utils'
-import { SIZE } from '@/constant'
 import { useCustomScroll } from '@/hooks'
+import ViewportTracker from '@/components/ViewportTracker'
+import { SIZE } from '@/constant'
 
 import type { TProps as TScrollProps } from './index'
 
@@ -80,13 +80,13 @@ const HorizontalScroller: FC<TProps> = ({
 
       <ScrollWrapper ref={ref}>
         <InnerWrapper innerHeight={innerHeight}>
-          <Waypoint
+          <ViewportTracker
             horizontal
             onEnter={handleHideLeftShadow}
             onLeave={handleShowLeftShadow}
           />
           {children}
-          <Waypoint
+          <ViewportTracker
             horizontal
             onEnter={handleHideRightShadow}
             onLeave={handleShowRightShadow}

src/components/CustomScroller/VerticalScroller.tsx

@@ -6,12 +6,13 @@
 
 import { FC, useState, useRef, useCallback, memo } from 'react'
 import { useTheme } from 'styled-components'
-import { Waypoint } from 'react-waypoint'
+
 import type { TThemeMap } from '@/spec'
 
 import { buildLog, debounce } from '@/utils'
 import { SIZE } from '@/constant'
 import { useCustomScroll } from '@/hooks'
+import ViewportTracker from '@/components/ViewportTracker'
 
 import type { TProps as TScrollProps } from './index'
 
@@ -137,9 +138,12 @@ const VerticalScroller: FC<TProps> = ({
       )}
 
       <ScrollWrapper ref={ref}>
-        <Waypoint onEnter={handleHideTopShadow} onLeave={handleShowTopShadow} />
+        <ViewportTracker
+          onEnter={handleHideTopShadow}
+          onLeave={handleShowTopShadow}
+        />
         {children}
-        <Waypoint
+        <ViewportTracker
           onEnter={handleHideBottomShadow}
           onLeave={handleShowBottomShadow}
         />

src/components/Modal/index.tsx

@@ -6,12 +6,12 @@
 
 import { FC, ReactNode, useEffect, useState, useCallback, memo } from 'react'
 import usePortal from 'react-useportal'
-import { Waypoint } from 'react-waypoint'
 
 import { ICON_CMD } from '@/config'
 import { buildLog, toggleGlobalBlur } from '@/utils'
 import { useShortcut } from '@/hooks'
 
+import ViewportTracker from '@/components/ViewportTracker'
 import Belt from './Belt'
 
 import { Mask, Wrapper, CloseBtn, EscHint, ChildrenWrapper } from './styles'
@@ -71,7 +71,7 @@ const Modal: FC<TProps> = ({
               background={background}
               offsetTop={offsetTop}
             >
-              <Waypoint onEnter={() => setVisibleOnPage(true)} />
+              <ViewportTracker onEnter={() => setVisibleOnPage(true)} />
               <CloseBtn
                 mode={mode}
                 src={`${ICON_CMD}/closeBtn.svg`}

src/components/ViewportTracker/index.tsx

@@ -4,11 +4,18 @@ import { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 type TProps = {
+  /**
+   * Function called when waypoint enters viewport
+   */
   onEnter: () => void
   /**
    * Function called when waypoint leaves viewport
    */
-  onLeave: () => void
+  onLeave?: () => void
+  /**
+   * Whether to activate on horizontal scrolling instead of vertical
+   */
+  horizontal?: boolean
 }
 
 const Waypoint = dynamic(

src/containers/content/ArticleContent/MobileView/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import { FC } from 'react'
-import { Waypoint } from 'react-waypoint'
 
 import { pluggedIn, buildLog } from '@/utils'
 
@@ -14,6 +13,7 @@ import ArticleFooter from '@/containers/unit/ArticleFooter'
 
 import Maybe from '@/components/Maybe'
 import MarkDownRender from '@/components/MarkDownRender'
+import ViewportTracker from '@/components/ViewportTracker'
 
 import type { TStore } from '../store'
 
@@ -50,7 +50,10 @@ const PostContentContainer: FC<TProps> = ({
             <ArticleWrapper>
               <MarkDownRender body={viewingArticle.body} />
             </ArticleWrapper>
-            <Waypoint onEnter={articleInAnchor} onLeave={articleOutAnchor} />
+            <ViewportTracker
+              onEnter={articleInAnchor}
+              onLeave={articleOutAnchor}
+            />
             <ArticleFooter />
             <CommentsWrapper>
               {/* @ts-ignore */}

src/containers/content/SponsorContent/Banner.js

@@ -7,9 +7,9 @@
  */
 
 import React, { useState } from 'react'
-import { Waypoint } from 'react-waypoint'
 
 import { buildLog } from '@/utils'
+import ViewportTracker from '@/components/ViewportTracker'
 
 import {
   SmileWrapper,
@@ -42,14 +42,14 @@ const Banner = () => {
   return (
     <React.Fragment>
       <AnchorH>
-        <Waypoint
+        <ViewportTracker
           onEnter={() => setAnchorHEnter(true)}
           onLeave={() => setAnchorHEnter(false)}
         />
       </AnchorH>
 
       <AnchorM>
-        <Waypoint
+        <ViewportTracker
           onEnter={() => {
             setAnchorMEnter(true)
             toggleBannerVisiable(true)
@@ -62,7 +62,7 @@ const Banner = () => {
       </AnchorM>
 
       <AnchorL>
-        <Waypoint
+        <ViewportTracker
           onEnter={() => setAnchorLEnter(true)}
           onLeave={() => setAnchorLEnter(false)}
         />

src/containers/content/TrendingContent/styles/news_board.ts

@@ -7,7 +7,6 @@ export const Wrapper = styled.div`
   width: 100%;
   position: relative;
 `
-// Waypoint hack
 export const ShadowBarHolder = styled.div`
   width: 1px;
   height: 100%;

src/containers/digest/ArticleDigest/MobileView/index.tsx

@@ -6,13 +6,14 @@
 
 import { FC } from 'react'
 import { isNil } from 'ramda'
-import { Waypoint } from 'react-waypoint'
 
 import type { TScrollDirection } from '@/spec'
 import { useScroll } from '@/hooks'
 import { pluggedIn, buildLog } from '@/utils'
 
 import ArticleBaseStats from '@/components/ArticleBaseStats'
+import ViewportTracker from '@/components/ViewportTracker'
+
 import PublishDate from '../DesktopView/PostLayout/PublishDate'
 
 import type { TStore } from '../store'
@@ -51,7 +52,7 @@ const ArticleDigestContainer: FC<TProps> = ({ articleDigest: store }) => {
           </Brief>
         </BannerContent>
       </InnerWrapper>
-      <Waypoint onEnter={inAnchor} onLeave={outAnchor} />
+      <ViewportTracker onEnter={inAnchor} onLeave={outAnchor} />
     </Wrapper>
   )
 }

src/containers/thread/ArticlesThread/index.tsx

@@ -7,17 +7,16 @@
  */
 
 import { FC } from 'react'
-import { Waypoint } from 'react-waypoint'
 import dynamic from 'next/dynamic'
 
 import type { TResState } from '@/spec'
 import { C11N } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
 import PagedArticles from '@/components/PagedArticles'
+import ViewportTracker from '@/components/ViewportTracker'
 // import ArticlesFilter from '@/components/ArticlesFilter'
 import ThreadSidebar from '@/containers/thread/ThreadSidebar'
-import { LavaLampLoading } from '@/components/Loading'
 
 import type { TStore } from './store'
 
@@ -55,7 +54,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
   return (
     <Wrapper>
       <MainWrapper>
-        <Waypoint onEnter={inAnchor} onLeave={outAnchor} />
+        <ViewportTracker onEnter={inAnchor} onLeave={outAnchor} />
         {showFilters && (
           <FilterWrapper>
             <ArticlesFilter

src/containers/thread/ReposThread/index.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react'
-import { Waypoint } from 'react-waypoint'
 
 import { ICON_CMD } from '@/config'
 import { THREAD } from '@/constant'
@@ -18,6 +17,7 @@ import { PublishButton } from '@/components/Buttons'
 import PagedArticles from '@/components/PagedArticles'
 import ArticlesFilter from '@/components/ArticlesFilter'
 import Maybe from '@/components/Maybe'
+import ViewportTracker from '@/components/ViewportTracker'
 
 import {
   Wrapper,
@@ -61,7 +61,7 @@ const ReposThreadContainer = ({ reposThread: store }) => {
   return (
     <Wrapper>
       <LeftPart>
-        <Waypoint onEnter={inAnchor} onLeave={outAnchor} />
+        <ViewportTracker onEnter={inAnchor} onLeave={outAnchor} />
         <Maybe test={showFilterBar}>
           <FilterWrapper>
             <ArticlesFilter