fix: Fix buggy loading skeleton

Author: CrawlerCode

src/components/issues/IssuesListSkeleton.tsx

@@ -6,9 +6,9 @@ const IssuesListSkeleton = () => {
       {[...Array(Math.floor(Math.random() * 2 + 2)).keys()].map(() => (
         <>
           <div className="animate-pulse h-2.5 my-0.5 w-28 rounded-full bg-gray-200 dark:bg-gray-700" />
-          {[...Array(Math.floor(Math.random() * 5 + 1)).keys()].map(() => {
+          {[...Array(Math.floor(Math.random() * 5 + 1)).keys()].map((_, i) => {
             return (
-              <div className={clsx("animate-pulse block w-full p-1 bg-white border border-gray-200 rounded-lg shadow-sm dark:shadow-gray-700 dark:bg-gray-800 dark:border-gray-700 relative")}>
+              <div key={i} className={clsx("animate-pulse block w-full p-1 bg-white border border-gray-200 rounded-lg shadow-sm dark:shadow-gray-700 dark:bg-gray-800 dark:border-gray-700 relative")}>
                 <div className="h-2.5 my-0.5 w-52 mb-2 rounded-full bg-gray-200 dark:bg-gray-700" />
                 <div className="flex flex-row justify-between gap-x-2">
                   <div className="mt-1">

src/hooks/useMyIssues.ts

@@ -22,6 +22,7 @@ const useMyIssues = (additionalIssuesIds: number[], search: string) => {
     queryFn: ({ pageParam = 0 }) => getOpenIssues(additionalIssuesIds, pageParam * 100, 100),
     getNextPageParam: (lastPage, allPages) => (lastPage.length === 100 ? allPages.length : undefined),
     enabled: additionalIssuesIds.length > 0,
+    keepPreviousData: additionalIssuesIds.length > 0,
   });
 
   // auto fetch all pages