make better skeletons

GenerateNU · Dec 4, 2024 · 9e97ace · 9e97ace
1 parent 9616a31
commit 9e97ace
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 44 deletions.
diff --git a/frontend/app/(tabs)/index.tsx b/frontend/app/(tabs)/index.tsx
@@ -16,7 +16,6 @@ import { ThemedText } from "@/components/ThemedText";
 
 import Icon from "react-native-vector-icons/Feather";
 import SkeletonLoader from "expo-skeleton-loader";
-import ReviewSkeleton from "@/components/skeletons/ReviewSkeleton";
 const logo = require("@/assets/images/icon.png");
 
 export default function HomeScreen() {
@@ -90,13 +89,14 @@ export default function HomeScreen() {
         <View>
           {isLoading && (
             <SkeletonLoader
-              duration={1000}
+              duration={500}
               boneColor="#f0f0f0"
               highlightColor="#fff"
+              style={loadingContainer}
             >
-              <ReviewSkeleton />
-              <ReviewSkeleton />
-              <ReviewSkeleton />
+              <SkeletonLoader.Item style={loadingReview} />
+              <SkeletonLoader.Item style={loadingReview} />
+              <SkeletonLoader.Item style={loadingReview} />
             </SkeletonLoader>
           )}
           {feedReviews && feedReviews.length > 0 ? (
@@ -112,7 +112,18 @@ export default function HomeScreen() {
   );
 }
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const { width } = Dimensions.get("window");
+
+const loadingReview = {
+  width: width - 20,
+  height: 200,
+  marginTop: 25,
+  borderRadius: 16,
+};
+
+const loadingContainer = {
+  paddingHorizontal: 20,
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -128,7 +139,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    width: SCREEN_WIDTH,
+    width: width,
     paddingHorizontal: 20,
     paddingTop: 20,
     marginRight: 20,

diff --git a/frontend/app/MediaReviewsPage.tsx b/frontend/app/MediaReviewsPage.tsx
@@ -1,12 +1,18 @@
 import React, { useState, useEffect } from "react";
-import { View, ScrollView, Image, Text, StyleSheet } from "react-native";
+import {
+  View,
+  ScrollView,
+  Image,
+  Text,
+  StyleSheet,
+  Dimensions,
+} from "react-native";
 import axios from "axios";
 import { useLocalSearchParams } from "expo-router";
 import HeaderComponent from "@/components/HeaderComponent";
 import ReviewPreview from "@/components/ReviewPreview";
 import Filter from "@/components/search/Filter";
 import Vinyl from "@/assets/images/media-vinyl.svg";
-import ReviewSkeleton from "@/components/skeletons/ReviewSkeleton";
 import SkeletonLoader from "expo-skeleton-loader";
 
 const MediaReviewsPage = () => {
@@ -47,7 +53,7 @@ const MediaReviewsPage = () => {
     const fetchAll = async () => {
       try {
         const response = await axios.get(
-          `${BASE_URL}/reviews/${media_type}/${media_id}`,
+          `${BASE_URL}/reviews/${media_type}/${media_id}`
         );
         setAllReviews(response.data.reviews);
 
@@ -79,7 +85,7 @@ const MediaReviewsPage = () => {
             params: {
               media_type: media_type,
             },
-          },
+          }
         );
 
         const reviews = response.data;
@@ -89,7 +95,7 @@ const MediaReviewsPage = () => {
           // Calculate the average score
           const totalScore = reviews.reduce(
             (sum: any, review: { rating: any }) => sum + review.rating,
-            0,
+            0
           ); // Sum of all ratings
           const averageScore =
             reviews.length > 0 ? totalScore / reviews.length : 0; // Avoid division by 0
@@ -113,7 +119,7 @@ const MediaReviewsPage = () => {
             params: {
               media_type: media_type,
             },
-          },
+          }
         );
 
         const reviews = response.data;
@@ -123,7 +129,7 @@ const MediaReviewsPage = () => {
           // Calculate the average score
           const totalScore = reviews.reduce(
             (sum: any, review: { rating: any }) => sum + review.rating,
-            0,
+            0
           ); // Sum of all ratings
           const averageScore =
             reviews.length > 0 ? totalScore / reviews.length : 0; // Avoid division by 0
@@ -239,9 +245,9 @@ const MediaReviewsPage = () => {
             boneColor="#f0f0f0"
             highlightColor="#fff"
           >
-            <ReviewSkeleton />
-            <ReviewSkeleton />
-            <ReviewSkeleton />
+            <SkeletonLoader.Item style={loadingReview} />
+            <SkeletonLoader.Item style={loadingReview} />
+            <SkeletonLoader.Item style={loadingReview} />
           </SkeletonLoader>
         )}
         {selectedFilter === "you" &&
@@ -264,6 +270,15 @@ const MediaReviewsPage = () => {
   );
 };
 
+const { width } = Dimensions.get("window");
+
+const loadingReview = {
+  width: width - 32,
+  height: 200,
+  marginTop: 25,
+  borderRadius: 16,
+};
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/frontend/components/skeletons/ReviewSkeleton.tsx b/frontend/components/skeletons/ReviewSkeleton.tsx