fix: streamline loading component rendering in Articles, Notifications, and SavedPosts pages

Author: NiallJoeMaher

app/(app)/articles/_client.tsx

@@ -105,9 +105,7 @@ const ArticlesPage = () => {
                 </div>
               )}
               {status === "pending" &&
-                Array.from({ length: 7 }, (_, i) => (
-                  <ArticleLoading key={i} />
-                ))}
+                Array.from({ length: 7 }, (_, i) => <ArticleLoading key={i} />)}
               {status === "success" &&
                 data.pages.map((page) => {
                   return (

app/(app)/notifications/_client.tsx

@@ -91,9 +91,7 @@ const Notifications = () => {
             <div>Something went wrong... Please refresh your page.</div>
           )}
           {status === "pending" &&
-            Array.from({ length: 7 }, (_, i) => (
-              <Placeholder key={i} />
-            ))}
+            Array.from({ length: 7 }, (_, i) => <Placeholder key={i} />)}
           {status !== "pending" && noNotifications && (
             <p className="text-lg font-semibold text-neutral-900 dark:text-neutral-50">
               No new notifications. ✅{" "}

app/(app)/saved/_client.tsx

@@ -32,9 +32,7 @@ const SavedPosts = () => {
       <PageHeading>Saved items</PageHeading>
       <div>
         {bookmarkStatus === "pending" &&
-          Array.from({ length: 7 }, (_, i) => (
-            <ArticleLoading key={i} />
-          ))}
+          Array.from({ length: 7 }, (_, i) => <ArticleLoading key={i} />)}
         {bookmarkStatus === "error" && (
           <p className="py-4 font-medium">
             Something went wrong fetching your saved posts... Refresh the page.