From 6f6b46c14a0137391687d4bd8e0e9b91ec19b299 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Thu, 22 Aug 2024 16:47:58 +0200
Subject: [PATCH] chore

---
 components/common/VerticalSkeleton.tsx     | 29 ++++++++++++++++++++++
 components/filters/ResetFiltersButton.tsx  |  2 +-
 components/medialists/MediaListSection.tsx | 14 +++++------
 components/posters/AlbumCover.tsx          |  2 +-
 components/posters/ArtistPoster.tsx        |  2 +-
 components/posters/MoviePoster.tsx         |  2 +-
 components/posters/ParentPoster.tsx        |  2 +-
 components/posters/Poster.tsx              |  2 +-
 components/posters/SeriesPoster.tsx        |  2 +-
 9 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 components/common/VerticalSkeleton.tsx

diff --git a/components/common/VerticalSkeleton.tsx b/components/common/VerticalSkeleton.tsx
new file mode 100644
index 00000000..1b2b1457
--- /dev/null
+++ b/components/common/VerticalSkeleton.tsx
@@ -0,0 +1,29 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+
+interface Props extends ViewProps {
+  index: number;
+}
+
+export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
+  return (
+    <View
+      key={index}
+      style={{
+        width: "32%",
+      }}
+      className="flex flex-col"
+      {...props}
+    >
+      <View
+        style={{
+          aspectRatio: "10/15",
+        }}
+        className="w-full bg-neutral-800 mb-2 rounded-lg"
+      ></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-1"></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-1"></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-2 w-1/2"></View>
+    </View>
+  );
+};
diff --git a/components/filters/ResetFiltersButton.tsx b/components/filters/ResetFiltersButton.tsx
index a99ce724..dfeee025 100644
--- a/components/filters/ResetFiltersButton.tsx
+++ b/components/filters/ResetFiltersButton.tsx
@@ -29,7 +29,7 @@ export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
         setSelectedTags([]);
         setSelectedYears([]);
       }}
-      className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center"
+      className="bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1"
       {...props}
     >
       <Ionicons name="close" size={20} color="white" />
diff --git a/components/medialists/MediaListSection.tsx b/components/medialists/MediaListSection.tsx
index 118600a3..9b013e16 100644
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -4,16 +4,14 @@ import {
   BaseItemDtoQueryResult,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { View, ViewProps } from "react-native";
-import { ScrollingCollectionList } from "../home/ScrollingCollectionList";
-import { Text } from "../common/Text";
-import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import MoviePoster from "../posters/MoviePoster";
 import { useCallback } from "react";
+import { View, ViewProps } from "react-native";
+import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
+import { Text } from "../common/Text";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
+import MoviePoster from "../posters/MoviePoster";
 
 interface Props extends ViewProps {
   collection: BaseItemDto;
@@ -35,7 +33,7 @@ export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
         userId: user.Id,
         parentId: collection.Id,
         startIndex: pageParam,
-        limit: 10,
+        limit: 8,
       });
 
       return response.data;
diff --git a/components/posters/AlbumCover.tsx b/components/posters/AlbumCover.tsx
index 6a4ad770..870dce6a 100644
--- a/components/posters/AlbumCover.tsx
+++ b/components/posters/AlbumCover.tsx
@@ -36,7 +36,7 @@ const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
 
   if (!item && id)
     return (
-      <View className="relative rounded-md overflow-hidden border border-neutral-900">
+      <View className="relative rounded-lg overflow-hidden border border-neutral-900">
         <Image
           key={id}
           id={id}
diff --git a/components/posters/ArtistPoster.tsx b/components/posters/ArtistPoster.tsx
index 2b9f2899..d64818b6 100644
--- a/components/posters/ArtistPoster.tsx
+++ b/components/posters/ArtistPoster.tsx
@@ -29,7 +29,7 @@ const ArtistPoster: React.FC<ArtistPosterProps> = ({
   if (!url)
     return (
       <View
-        className="rounded-md overflow-hidden border border-neutral-900"
+        className="rounded-lg overflow-hidden border border-neutral-900"
         style={{
           aspectRatio: "1/1",
         }}
diff --git a/components/posters/MoviePoster.tsx b/components/posters/MoviePoster.tsx
index f1495ac6..972392b6 100644
--- a/components/posters/MoviePoster.tsx
+++ b/components/posters/MoviePoster.tsx
@@ -38,7 +38,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
   }, [item]);
 
   return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,
diff --git a/components/posters/ParentPoster.tsx b/components/posters/ParentPoster.tsx
index 04e2c72b..70bc6629 100644
--- a/components/posters/ParentPoster.tsx
+++ b/components/posters/ParentPoster.tsx
@@ -28,7 +28,7 @@ const ParentPoster: React.FC<PosterProps> = ({ id }) => {
     );
 
   return (
-    <View className="rounded-md overflow-hidden border border-neutral-900">
+    <View className="rounded-lg overflow-hidden border border-neutral-900">
       <Image
         key={id}
         id={id}
diff --git a/components/posters/Poster.tsx b/components/posters/Poster.tsx
index 795c9df2..1787506e 100644
--- a/components/posters/Poster.tsx
+++ b/components/posters/Poster.tsx
@@ -24,7 +24,7 @@ const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
     );
 
   return (
-    <View className="rounded-md overflow-hidden border border-neutral-900">
+    <View className="rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={
           blurhash
diff --git a/components/posters/SeriesPoster.tsx b/components/posters/SeriesPoster.tsx
index 6e4aa1f8..d235639f 100644
--- a/components/posters/SeriesPoster.tsx
+++ b/components/posters/SeriesPoster.tsx
@@ -30,7 +30,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
   }, [item]);
 
   return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,