From ce520717e01ded5d0e9a49a7651979504c03a4c1 Mon Sep 17 00:00:00 2001 From: Artemy Date: Wed, 9 Aug 2023 18:54:05 +0300 Subject: [PATCH] feat: skeleton for videos --- index.html | 25 ++++++++++++++----------- src/components/video.tsx | 24 ++++++++++++++++++++++-- src/index.css | 7 +++++++ src/pages/trending.tsx | 12 +++++++++++- 4 files changed, 54 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index e4b78ea..53b3037 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React + TS - - -
- - - + + + + + + Vite + React + TS + + + +
+ + + + \ No newline at end of file diff --git a/src/components/video.tsx b/src/components/video.tsx index 55e8f45..ff17eba 100644 --- a/src/components/video.tsx +++ b/src/components/video.tsx @@ -1,4 +1,11 @@ -import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react"; +import { + Avatar, + Card, + CardBody, + CardHeader, + Link, + Skeleton, +} from "@nextui-org/react"; import { Video } from "piped-api/dist/types"; import { useNavigate } from "react-router-dom"; import { CheckCircleIcon, EyeIcon } from "@heroicons/react/24/solid"; @@ -23,7 +30,7 @@ export function VideoComponent({ video }: VideoComponentProps) { {video.title} -
+

{video.uploaderName}

{video.uploaderVerified && ( @@ -42,6 +49,19 @@ export function VideoComponent({ video }: VideoComponentProps) { ); } +export function SkeletonVideoComponent() { + return ( + + +
+ + + + + + ); +} + type VideoComponentProps = { video: Video; }; diff --git a/src/index.css b/src/index.css index b5c61c9..27ed007 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,10 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + body { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); + @apply bg-gray-200; + } +} diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx index f26443a..2e00043 100644 --- a/src/pages/trending.tsx +++ b/src/pages/trending.tsx @@ -1,6 +1,6 @@ import { Video } from "piped-api/dist/types"; import { useEffect, useState } from "react"; -import { VideoComponent } from "../components/video"; +import { SkeletonVideoComponent, VideoComponent } from "../components/video"; export default function Trending() { const [trending, setTrending] = useState([] as Video[]); @@ -16,6 +16,16 @@ export default function Trending() { } }); + if (trending.length === 0) { + return ( +
+ {[...Array(20).keys()].map((num) => ( + + ))} +
+ ); + } + return (
{trending.map((video) => (