update

Zaid-maker · Dec 17, 2023 · 3ad5d19 · 3ad5d19
1 parent 306fb2b
commit 3ad5d19
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/app/(browse)/_components/sidebar/following.tsx b/app/(browse)/_components/sidebar/following.tsx
@@ -2,7 +2,7 @@
 
 import { useSidebar } from "@/store/use-sidebar";
 import { Follow, User } from "@prisma/client";
-import { UserItem } from "./user-item";
+import { UserItem, UserItemSkeleton } from "./user-item";
 
 interface FollowingProps {
   data: (Follow & { following: User })[];
@@ -35,3 +35,13 @@ export const Following = ({ data }: FollowingProps) => {
     </div>
   );
 };
+
+export const FollowingSkeleton = () => {
+  return (
+    <ul className="px-2 pt-2 lg:pt-0">
+      {[...Array(3)].map((_, i) => (
+        <UserItemSkeleton key={i} />
+      ))}
+    </ul>
+  );
+};
diff --git a/app/(browse)/_components/sidebar/index.tsx b/app/(browse)/_components/sidebar/index.tsx
@@ -3,7 +3,7 @@ import { Recommended, RecommendedSkeleton } from "./recommended";
 import { Toggle, ToggleSkeleton } from "./toggle";
 import { Wrapper } from "./wrapper";
 import { getFollowedUsers } from "@/lib/follow-service";
-import { Following } from "./following";
+import { Following, FollowingSkeleton } from "./following";
 
 export const Sidebar = async () => {
   const recommended = await getRecommended();
@@ -13,8 +13,8 @@ export const Sidebar = async () => {
     <Wrapper>
       <Toggle />
       <div className="space-y-4 pt-4 lg:pt-0">
-        <Recommended data={recommended} />
         <Following data={following} />
+        <Recommended data={recommended} />
       </div>
     </Wrapper>
   );
@@ -24,6 +24,7 @@ export const SidebarSkeleton = () => {
   return (
     <aside className="fixed left-0 flex flex-col w-[70px] lg:w-60 h-full bg-background border-r border-[#2D2E35] z-50">
       <ToggleSkeleton />
+      <FollowingSkeleton />
       <RecommendedSkeleton />
     </aside>
   );

diff --git a/app/(browse)/_components/sidebar/wrapper.tsx b/app/(browse)/_components/sidebar/wrapper.tsx
@@ -6,6 +6,7 @@ import React from "react";
 import { useIsClient } from "usehooks-ts";
 import { RecommendedSkeleton } from "./recommended";
 import { ToggleSkeleton } from "./toggle";
+import { FollowingSkeleton } from "./following";
 
 interface WrapperProps {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ export const Wrapper = ({ children }: WrapperProps) => {
     return (
       <aside className="fixed left-0 flex flex-col w-[70px] lg:w-60 h-full bg-background border-r border-[#2D2E35] z-50">
         <ToggleSkeleton />
+        <FollowingSkeleton />
         <RecommendedSkeleton />
       </aside>
     );