feat: Optimize Home Feed Components and mock switch channel

thematters · Feb 7, 2025 · 311465d · 311465d
1 parent 1bb9c95
commit 311465d
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 55 deletions.
diff --git a/src/views/Home/Channel/Page/Carousel/styles.module.css b/src/views/Home/Channel/Page/Carousel/styles.module.css
@@ -104,6 +104,10 @@
   gap: var(--sp12);
   margin-top: var(--sp12);
 
+  @media (--sm-down) {
+    padding: 0 var(--sp16);
+  }
+
   & .placeholderBox {
     height: 1.875rem;
     background-color: var(--color-grey-lighter);

diff --git a/src/views/Home/Feed/MainFeed/Placeholder.tsx b/src/views/Home/Feed/MainFeed/Placeholder.tsx
@@ -0,0 +1,25 @@
+import ArticleDigestFeedPlaceholder from '~/components/ArticleDigest/Feed/Placeholder'
+
+import styles from './styles.module.css'
+
+type PlaceholderProps = {
+  spacing?: boolean
+}
+
+export default function Placeholder({ spacing }: PlaceholderProps) {
+  const className = spacing ? styles.spacing16 : ''
+  return (
+    <div className={className}>
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+      <ArticleDigestFeedPlaceholder />
+    </div>
+  )
+}
diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
@@ -7,34 +7,27 @@ import {
   CardExposureTracker,
   EmptyArticle,
   InfiniteScroll,
-  LanguageContext,
   List,
   Media,
   QueryError,
-  SpinnerBlock,
-  useNativeEventListener,
   usePublicQuery,
+  useRoute,
   ViewerContext,
 } from '~/components'
-import { CHANNELS } from '~/components/GQL/queries/channels'
 import {
-  ChannelsQuery,
   HottestFeedPublicQuery,
   IcymiFeedPublicQuery,
   NewestFeedPublicQuery,
 } from '~/gql/graphql'
 
 import Announcements from '../../Announcements'
-import DropdownDialog from '../../Channel/DropdownDialog'
-import ChannelCarousel from '../../Channel/Page/Carousel'
-import CarouselPlaceHolder from '../../Channel/Page/Carousel/PlaceHolder'
-import SingleLine from '../../Channel/SingleLine'
 import Authors from '../Authors'
 import Billboard from '../Billboard'
 import { FEED_ARTICLES_PRIVATE, FEED_ARTICLES_PUBLIC } from '../gql'
 import { IcymiCuratedFeed } from '../IcymiCuratedFeed'
 import { HomeFeedType } from '../SortBy'
 import Tags from '../Tags'
+import Placeholder from './Placeholder'
 type FeedArticlesPublic =
   | HottestFeedPublicQuery
   | NewestFeedPublicQuery
@@ -96,29 +89,19 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
   const isHottestFeed = sortBy === 'hottest'
   const isIcymiFeed = sortBy === 'icymi'
 
-  const [showDropdown, setShowDropdown] = useState(false)
-
-  const toggleDropdown = () => {
-    setShowDropdown(!showDropdown)
-  }
+  const { getQuery } = useRoute()
+  const shortHash = getQuery('shortHash')
+  const [isLoading, setIsLoading] = useState(false)
 
+  // Mock loading state
   useEffect(() => {
-    if (showDropdown) {
-      document.body.style.overflow = 'hidden'
-    } else {
-      document.body.style.overflow = 'auto'
-    }
-  }, [showDropdown])
-
-  const [showSingleLine, setShowSingleLine] = useState(false)
-
-  useNativeEventListener('scroll', () => {
-    if (window.scrollY > 85) {
-      setShowSingleLine(true)
-    } else {
-      setShowSingleLine(false)
+    if (shortHash) {
+      setIsLoading(true)
+      setTimeout(() => {
+        setIsLoading(false)
+      }, 1000)
     }
-  })
+  }, [shortHash])
 
   /**
    * Data Fetching
@@ -130,13 +113,6 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
       notifyOnNetworkStatusChange: true,
     })
 
-  const { lang } = useContext(LanguageContext)
-
-  const { data: channelsData, loading: channelsLoading } =
-    usePublicQuery<ChannelsQuery>(CHANNELS, {
-      variables: { userLanguage: lang },
-    })
-
   // pagination
   const connectionPath = 'viewer.recommendation.feed'
   const recommendation = data?.viewer?.recommendation
@@ -202,15 +178,14 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
   /**
    * Render
    */
-  if ((loading && (!result || isNewLoading)) || channelsLoading) {
+  if ((loading && (!result || isNewLoading)) || isLoading) {
     if (typeof window !== 'undefined') {
       window.scrollTo(0, 0)
       document.body.focus()
     }
     return (
       <>
-        <CarouselPlaceHolder />
-        <SpinnerBlock />
+        <Placeholder />
       </>
     )
   }
@@ -245,8 +220,6 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
     })
   }
 
-  const channels = channelsData?.channels || []
-
   return (
     <>
       {recommendation &&
@@ -261,18 +234,6 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
         eof
       >
         <List>
-          <Media lessThan="lg">
-            <ChannelCarousel channels={channels} />
-            {showSingleLine && (
-              <SingleLine channels={channels} toggleDropdown={toggleDropdown} />
-            )}
-            {showDropdown && (
-              <DropdownDialog
-                channels={channels}
-                toggleDropdown={toggleDropdown}
-              />
-            )}
-          </Media>
           {isHottestFeed && <Announcements />}
           {mixFeed.map((edge, i) => {
             if (edge?.__typename === 'HorizontalFeed') {

diff --git a/src/views/Home/Feed/MainFeed/styles.module.css b/src/views/Home/Feed/MainFeed/styles.module.css
@@ -0,0 +1,5 @@
+.spacing16 {
+  @media (--sm-down) {
+    padding: 0 var(--sp16);
+  }
+}
diff --git a/src/views/Home/Feed/index.tsx b/src/views/Home/Feed/index.tsx
@@ -1,8 +1,23 @@
-import { useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
-import { Layout, Media, Spacer, useRoute } from '~/components'
+import {
+  LanguageContext,
+  Layout,
+  Media,
+  Spacer,
+  useNativeEventListener,
+  usePublicQuery,
+  useRoute,
+} from '~/components'
+import { CHANNELS } from '~/components/GQL/queries/channels'
+import { ChannelsQuery } from '~/gql/graphql'
 
+import DropdownDialog from '../Channel/DropdownDialog'
+import ChannelCarousel from '../Channel/Page/Carousel'
+import CarouselPlaceHolder from '../Channel/Page/Carousel/PlaceHolder'
+import SingleLine from '../Channel/SingleLine'
 import MainFeed from './MainFeed'
+import MainFeedPlaceholder from './MainFeed/Placeholder'
 import { HomeFeedType } from './SortBy'
 
 const HomeFeed = () => {
@@ -16,6 +31,50 @@ const HomeFeed = () => {
   //   setFeedType(newType)
   // }
 
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  const toggleDropdown = () => {
+    setShowDropdown(!showDropdown)
+  }
+
+  useEffect(() => {
+    if (showDropdown) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'auto'
+    }
+  }, [showDropdown])
+
+  const [showSingleLine, setShowSingleLine] = useState(false)
+
+  useNativeEventListener('scroll', () => {
+    if (window.scrollY > 85) {
+      setShowSingleLine(true)
+    } else {
+      setShowSingleLine(false)
+    }
+  })
+
+  const { lang } = useContext(LanguageContext)
+
+  const { data: channelsData, loading: channelsLoading } =
+    usePublicQuery<ChannelsQuery>(CHANNELS, {
+      variables: { userLanguage: lang },
+    })
+
+  if (channelsLoading) {
+    return (
+      <>
+        <Media lessThan="md">
+          <CarouselPlaceHolder />
+        </Media>
+        <MainFeedPlaceholder />
+      </>
+    )
+  }
+
+  const channels = channelsData?.channels || []
+
   return (
     <>
       {/* <SortBy feedType={feedType} setFeedType={changeFeed} /> */}
@@ -24,6 +83,18 @@ const HomeFeed = () => {
         <Media greaterThan="sm">
           <Spacer size="sp32" />
         </Media>
+        <Media lessThan="lg">
+          <ChannelCarousel channels={channels} />
+          {showSingleLine && (
+            <SingleLine channels={channels} toggleDropdown={toggleDropdown} />
+          )}
+          {showDropdown && (
+            <DropdownDialog
+              channels={channels}
+              toggleDropdown={toggleDropdown}
+            />
+          )}
+        </Media>
         <MainFeed feedSortType={feedType} />
       </Layout.Main.Spacing>
     </>