added skeleton loading

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")}

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) => {

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>