From d15d965139ee4b6f7027f2f0b8f8ccfcf02b44ed Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 14 Aug 2024 13:14:06 -0400
Subject: [PATCH] added skeleton loading

---
 components/CollectionListing.tsx | 12 ++++++++++--
 components/Sidebar.tsx           | 10 ++++++++--
 pages/dashboard.tsx              |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/CollectionListing.tsx b/components/CollectionListing.tsx
index f118184..8abc080 100644
--- a/components/CollectionListing.tsx
+++ b/components/CollectionListing.tsx
@@ -25,7 +25,7 @@ interface ExtendedTreeItem extends TreeItem {
 const CollectionListing = () => {
   const { t } = useTranslation();
   const updateCollection = useUpdateCollection();
-  const { data: collections = [] } = useCollections();
+  const { data: collections = [], isLoading } = useCollections();
 
   const { data: user = {} } = useUser();
   const updateUser = useUpdateUser();
@@ -204,7 +204,15 @@ const CollectionListing = () => {
     }
   };
 
-  if (!tree) {
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+      </div>
+    );
+  } else if (!tree) {
     return (
       <p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
         {t("you_have_no_collections")}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index dc15c61..645fda4 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -24,7 +24,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   const { data: collections } = useCollections();
 
-  const { data: tags = [] } = useTags();
+  const { data: tags = [], isLoading } = useTags();
   const [active, setActive] = useState("");
 
   const router = useRouter();
@@ -128,7 +128,13 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel className="flex flex-col gap-1">
-            {tags[0] ? (
+            {isLoading ? (
+              <div className="flex flex-col gap-4">
+                <div className="skeleton h-4 w-full"></div>
+                <div className="skeleton h-4 w-full"></div>
+                <div className="skeleton h-4 w-full"></div>
+              </div>
+            ) : tags[0] ? (
               tags
                 .sort((a: any, b: any) => a.name.localeCompare(b.name))
                 .map((e: any, i: any) => {
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index d6f540d..b9ba86d 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -168,7 +168,7 @@ export default function Dashboard() {
             <div className="w-full">
               <Links
                 layout={viewMode}
-                placeholderCount={showLinks}
+                placeholderCount={showLinks / 2}
                 useData={dashboardData}
               />
             </div>
@@ -307,7 +307,7 @@ export default function Dashboard() {
             <div className="w-full">
               <Links
                 layout={viewMode}
-                placeholderCount={showLinks}
+                placeholderCount={showLinks / 2}
                 useData={dashboardData}
               />
             </div>