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({
)
}
+
+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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
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({
)
}
+
+export function PostFeedVideoGridRowPlaceholder() {
+ const gutters = useGutters(['base', 'base', 0, 'base'])
+ return (
+
+
+
+
+
+
+ )
+}
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(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
+ } else if (row.type === 'videoGridRowPlaceholder') {
+ return (
+
+
+
+
+
+ )
} else if (row.type === 'videoGridRow') {
return (