pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better lazy loading

Browse Source
This commit is contained in:
zmeyer44 2023-10-16 11:08:11 -04:00
parent 919b768a39
commit 2e8a389a22
4 changed files with 25 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/(app)/app/_sections/LiveStreaming.tsx
View File

@ -30,36 +30,7 @@ export default function LiveStreamingSection() {
});
const processedEvents = uniqBy((e) => getTagValues("title", e.tags), events);
const demo = [
{
id: 1,
title: "BTC Radio",
picture:
"https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530",
tags: ["music", "crypto", "art"],
},
{
id: 2,
title: "The Book of Alpha: NFTs and crypto taking over. Market Talk",
picture:
"https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/31095.thumbnail.png?1692203850",
tags: ["NFTs", "crypto", "art", "trading"],
},
{
id: 3,
title: "Space Talk: What's Elon up to?",
picture:
"https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40088.original.png?1692206315",
tags: ["Space"],
},
{
id: 4,
title: "The Book of Alpha: NFTs and crypto taking over. Market Talk",
picture:
"https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40680.original.png?1692206434",
tags: ["Market"],
},
];
console.log(events);
return (
<Section className="max-sm:-mx-5">
<SectionHeader>
@ -85,10 +56,12 @@ export default function LiveStreamingSection() {
const title = getTagValues("title", event.tags) as string;
const starts = getTagValues("starts", event.tags) as string;
const tags = getTagsValues("t", event.tags) as string[];
const total_participants = getTagValues(
"total_participants",
const total_participants =
getTagValues("total_participants", event.tags) ??
(getTagValues(
"current_participants",
event.tags,
) as string;
) as string);
const status = getTagValues("status", event.tags) as
| "live"
| "planned"

17
app/(app)/app/page.tsx
View File

@ -1,9 +1,20 @@
import dynamic from "next/dynamic";
import ExploreCreators from "./_sections/ExploreCreators";
import BecomeACreator from "./_sections/BecomeACreator";
import LiveStreamingSection from "./_sections/LiveStreaming";
import FeaturedListsSection from "./_sections/FeaturedLists";
import LongFormContentSection from "./_sections/LongFormContent";
import BecomeACreator from "./_sections/BecomeACreator";
const LiveStreamingSection = dynamic(
() => import("./_sections/LiveStreaming"),
{
ssr: false,
},
);
const FeaturedListsSection = dynamic(
() => import("./_sections/FeaturedLists"),
{
ssr: false,
},
);
export default function Page() {
return (
<div className="relative space-y-6 pt-5 sm:pt-7">

2
components/KindCard/loading.tsx
View File

@ -6,7 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton";
export default function KindLoading() {
return (
<Container>
<div className="space-y-2 text-muted-foreground">
<div className="mb-3 space-y-2 text-muted-foreground">
<Skeleton className="mb-2 h-4 w-1/3 bg-muted" />
<Skeleton className="h-4 w-1/2 bg-muted" />
<Skeleton className="h-4 w-2/5 bg-muted" />

6
components/VideoCard/index.tsx
View File

@ -51,14 +51,14 @@ export default function VideoCard({ className, card }: VideoCardProps) {
<div className="flex-1 space-y-2 text-base">
<h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3>
<div className="flex items-center gap-x-3">
<div className="flex flex-col items-start">
<div className="flex flex-col items-start gap-y-1">
{startTime && (
<div className="center gap-x-1 text-xs text-muted-foreground">
<RxClock className="h-4 w-4 text-primary" />
<span>{formatDate(new Date(startTime), "h:m a")}</span>
</div>
)}
{card["total_participants"] && (
{!!card["total_participants"] && (
<div className="center gap-x-1 text-xs text-muted-foreground">
<HiOutlineUsers className="h-4 w-4 text-primary" />
<span>{formatNumber(card["total_participants"])}</span>
@ -90,7 +90,7 @@ export function VideoCardLoading({ className }: { className: string }) {
<Skeleton className="mb-2 h-4 w-1/3 bg-muted" />
<div className="flex flex-col items-start">
<div className="center gap-x-1 text-xs text-muted-foreground">
<RxClock className="h-4 w-4 text-primary" />
<Skeleton className="h-3 w-3 bg-muted" />
<Skeleton className="h-3 w-[50px] bg-muted" />
</div>
</div>