feat: add skeleton loader

apps/web/src/views/oss-friends/index.tsx

@@ -18,6 +18,7 @@ interface OSSFriendsResponse {
 
 export default function OSSFriendsView() {
   const [ossFriends, setOSSFriends] = useState<OSSFriend[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const fetchOSSFriends = async (): Promise<OSSFriend[]> => {
     try {
       const response = await fetch("/api/oss-friends");
@@ -36,8 +37,12 @@ export default function OSSFriendsView() {
 
   useEffect(() => {
     async function fetchData() {
+      try {
         const data = await fetchOSSFriends();
         setOSSFriends(data);
+      } finally {
+        setIsLoading(false);
+      }
     }
     void fetchData();
   }, []);
@@ -59,7 +64,23 @@ export default function OSSFriendsView() {
         </div>
         <div className="mx-auto w-full max-w-7xl px-4 pb-24">
           <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            {ossFriends.map((friend, idx) => {
+            {isLoading &&
+              Array.from({ length: 12 }).map((_, idx) => (
+                <div
+                  key={`oss-friend-skeleton-${idx}`}
+                  className="group relative h-[200px] rounded-2xl border border-light-200 bg-light-50 p-6 dark:border-dark-200 dark:bg-dark-50"
+                >
+                  <div className="mb-4 flex flex-col gap-3">
+                    <div className="h-5 w-2/3 animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
+                    <div className="h-3 w-full animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
+                    <div className="h-3 w-5/6 animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
+                  </div>
+                  <div className="h-8 w-28 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+                </div>
+              ))}
+
+            {!isLoading &&
+              ossFriends.map((friend, idx) => {
                 return (
                   <div
                     key={`oss-friend-${idx}`}