From b1f6cd17c572a806c57fc0f40368c44288b245c3 Mon Sep 17 00:00:00 2001 From: Saurabh254 Date: Sun, 24 Aug 2025 16:09:37 +0530 Subject: [PATCH] feat: Added homescreen shimmer effect --- webapp/src/components/MainView.tsx | 6 +- .../src/components/shimmer/CardsShimmer.tsx | 92 +++++++++++++++++++ webapp/src/utils.ts | 5 + 3 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 webapp/src/components/shimmer/CardsShimmer.tsx create mode 100644 webapp/src/utils.ts diff --git a/webapp/src/components/MainView.tsx b/webapp/src/components/MainView.tsx index ab6c8bc..15aac96 100644 --- a/webapp/src/components/MainView.tsx +++ b/webapp/src/components/MainView.tsx @@ -4,6 +4,7 @@ import { Content, Page } from "@/types"; import { Axios } from "axios"; import { useEffect, useState } from "react"; import ContentWithBlurhash from "./ContentWithBlurhash"; +import CardsShimmer from "./shimmer/CardsShimmer"; const MainView = () => { const [contents, setContents] = useState | null>(null); @@ -21,9 +22,10 @@ const MainView = () => { }; api_call(); }, []); - + if (contents === null) { + return ; + } return ( - //
{contents && contents.items.map((content) => ( diff --git a/webapp/src/components/shimmer/CardsShimmer.tsx b/webapp/src/components/shimmer/CardsShimmer.tsx new file mode 100644 index 0000000..15bf03b --- /dev/null +++ b/webapp/src/components/shimmer/CardsShimmer.tsx @@ -0,0 +1,92 @@ +import { getRandomInteger } from "@/utils"; +const RAND_HEIGHTS = [70, 34, 40, 108]; + +const _CardShimmer = () => { + const randInt = RAND_HEIGHTS[getRandomInteger(0, 3)]; + + return ( +
+
+
+
+
+
+
+
+ + + + + + + + + {99} +
+
+ + + + + {50} +
+
+
+
+ ); +}; + +const CardsShimmer = () => { + return ( +
+ {Array.from({ length: 16 }).map((_, idx) => ( + <_CardShimmer key={idx} /> + ))} +
+ ); +}; + +export default CardsShimmer; diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts new file mode 100644 index 0000000..0e01f79 --- /dev/null +++ b/webapp/src/utils.ts @@ -0,0 +1,5 @@ +export function getRandomInteger(min, max) { + min = Math.ceil(min); // Ensure min is an integer + max = Math.floor(max); // Ensure max is an integer + return Math.floor(Math.random() * (max - min + 1)) + min; +} \ No newline at end of file