From 76485df01c2e9a20fc255e0fddc5132c4fb23cff Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 16 Jan 2025 18:17:20 -0600
Subject: [PATCH] Add placeholder for grid view

---
 src/components/VideoPostCard.tsx              | 70 +++++++++++++++++++
 src/components/feeds/PostFeedVideoGridRow.tsx | 18 ++++-
 src/view/com/posts/PostFeed.tsx               | 38 +++++++---
 3 files changed, 117 insertions(+), 9 deletions(-)

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index e5898226a4..97633dc13e 100644
--- a/src/components/VideoPostCard.tsx
+++ b/src/components/VideoPostCard.tsx
@@ -161,3 +161,73 @@ export function VideoPostCard({
     </Link>
   )
 }
+
+export function VideoPostCardPlaceholder() {
+  const t = useTheme()
+  const black = select(t.name, {
+    light: t.palette.black,
+    dark: t.atoms.bg_contrast_25.backgroundColor,
+    dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
+  })
+
+  return (
+    <View style={[a.flex_1]}>
+      <View
+        style={[
+          a.rounded_md,
+          a.overflow_hidden,
+          {
+            backgroundColor: black,
+            aspectRatio: 9 / 16,
+          },
+        ]}>
+        <MediaInsetBorder />
+      </View>
+      <View style={[a.pr_xs, {paddingTop: 8, gap: 6}]}>
+        <View
+          style={[
+            a.w_full,
+            a.rounded_xs,
+            t.atoms.bg_contrast_50,
+            {
+              height: 14,
+            },
+          ]}
+        />
+        <View
+          style={[
+            a.w_full,
+            a.rounded_xs,
+            t.atoms.bg_contrast_50,
+            {
+              height: 14,
+              width: '70%',
+            },
+          ]}
+        />
+        <View style={[a.flex_row, a.gap_xs, a.align_center]}>
+          <View
+            style={[
+              a.rounded_full,
+              t.atoms.bg_contrast_50,
+              {
+                width: 20,
+                height: 20,
+              },
+            ]}
+          />
+          <View
+            style={[
+              a.rounded_xs,
+              t.atoms.bg_contrast_25,
+              {
+                height: 12,
+                width: '75%',
+              },
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
diff --git a/src/components/feeds/PostFeedVideoGridRow.tsx b/src/components/feeds/PostFeedVideoGridRow.tsx
index 60372bef48..d9e2833dfa 100644
--- a/src/components/feeds/PostFeedVideoGridRow.tsx
+++ b/src/components/feeds/PostFeedVideoGridRow.tsx
@@ -3,7 +3,11 @@ import {AppBskyEmbedVideo} from '@atproto/api'
 
 import {FeedPostSliceItem} from '#/state/queries/post-feed'
 import {atoms as a, useGutters} from '#/alf'
-import {SourceContext,VideoPostCard} from '#/components/VideoPostCard'
+import {
+  SourceContext,
+  VideoPostCard,
+  VideoPostCardPlaceholder,
+} from '#/components/VideoPostCard'
 
 export function PostFeedVideoGridRow({
   slices,
@@ -35,3 +39,15 @@ export function PostFeedVideoGridRow({
     </View>
   )
 }
+
+export function PostFeedVideoGridRowPlaceholder() {
+  const gutters = useGutters(['base', 'base', 0, 'base'])
+  return (
+    <View style={[gutters]}>
+      <View style={[a.flex_row, a.gap_sm]}>
+        <VideoPostCardPlaceholder />
+        <VideoPostCardPlaceholder />
+      </View>
+    </View>
+  )
+}
diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx
index 32cdea84e2..8bb9d7162c 100644
--- a/src/view/com/posts/PostFeed.tsx
+++ b/src/view/com/posts/PostFeed.tsx
@@ -45,7 +45,10 @@ import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {useBreakpoints} from '#/alf'
 import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
-import {PostFeedVideoGridRow} from '#/components/feeds/PostFeedVideoGridRow'
+import {
+  PostFeedVideoGridRow,
+  PostFeedVideoGridRowPlaceholder,
+} from '#/components/feeds/PostFeedVideoGridRow'
 import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
 import {FeedShutdownMsg} from './FeedShutdownMsg'
@@ -86,6 +89,10 @@ type FeedRow =
       indexInSlice: number
       showReplyTo: boolean
     }
+  | {
+      type: 'videoGridRowPlaceholder'
+      key: string
+    }
   | {
       type: 'videoGridRow'
       key: string
@@ -176,6 +183,7 @@ let PostFeed = ({
   const lastFetchRef = React.useRef<number>(Date.now())
   const [feedType, feedUri, feedTab] = feed.split('|')
   const {gtMobile, gtTablet} = useBreakpoints()
+  const isVideoFeed = feedUri === VIDEO_FEED_URI
 
   const opts = React.useMemo(
     () => ({enabled, ignoreFilterFor}),
@@ -287,8 +295,6 @@ let PostFeed = ({
       feedKind = 'following'
     } else if (feedUri === DISCOVER_FEED_URI) {
       feedKind = 'discover'
-    } else if (feedUri === VIDEO_FEED_URI) {
-      feedKind = 'thevids'
     } else if (
       feedType === 'author' &&
       (feedTab === 'posts_and_author_threads' ||
@@ -318,7 +324,7 @@ let PostFeed = ({
       } else if (data) {
         let sliceIndex = -1
         for (const page of data?.pages) {
-          if (feedKind === 'thevids' && isNative) {
+          if (isVideoFeed && isNative) {
             const rows: FeedPostSliceItem[][] = []
             for (let i = 0; i < page.slices.length; i++) {
               const slice = page.slices[i]
@@ -436,10 +442,17 @@ let PostFeed = ({
         })
       }
     } else {
-      arr.push({
-        type: 'loading',
-        key: 'loading',
-      })
+      if (isVideoFeed) {
+        arr.push({
+          type: 'videoGridRowPlaceholder',
+          key: 'videoGridRowPlaceholder',
+        })
+      } else {
+        arr.push({
+          type: 'loading',
+          key: 'loading',
+        })
+      }
     }
 
     return arr
@@ -457,6 +470,7 @@ let PostFeed = ({
     trendingDisabled,
     gtTablet,
     gtMobile,
+    isVideoFeed,
   ])
 
   // events
@@ -579,6 +593,14 @@ let PostFeed = ({
         )
       } else if (row.type === 'sliceViewFullThread') {
         return <ViewFullThread uri={row.uri} />
+      } else if (row.type === 'videoGridRowPlaceholder') {
+        return (
+          <View>
+            <PostFeedVideoGridRowPlaceholder />
+            <PostFeedVideoGridRowPlaceholder />
+            <PostFeedVideoGridRowPlaceholder />
+          </View>
+        )
       } else if (row.type === 'videoGridRow') {
         return (
           <PostFeedVideoGridRow