fix: Footer position on initial render

src/components/ListRepositories.tsx

@@ -1,6 +1,6 @@
 import { BsFillCalendar2Fill } from "react-icons/bs";
-import Skeleton from "react-loading-skeleton";
 import RepoList from "./RepoList";
+import Skeleton from "react-loading-skeleton";
 
 export declare interface ListRepositoriesProps {
   activeLink: string | null;

src/components/RecentRepoListWrap.tsx

@@ -3,13 +3,14 @@ import locationsHash from "../lib/locationsHash";
 import ListRepositories from "./ListRepositories";
 import { useEffect, useState } from "react";
 import { useRepositoriesList } from "../hooks/useRepositoriesList";
+import Skeleton from "react-loading-skeleton";
 
 export enum RepoOrderByEnum {
   popular = "stars",
   recent = "created_at",
   upvoted = "votesCount",
   discussed = "issues",
-  myVotes = "myVotes"
+  myVotes = "myVotes",
 }
 
 const parseLimitValue = (limit: string | null): number => {
@@ -39,29 +40,37 @@ const RecentRepoListWrap = (): JSX.Element => {
   const [lastWeek, setLastWeek] = useState<DbRepo[] | null>(null);
   const [older, setOlder] = useState<DbRepo[] | null>(null);
 
-  useEffect( () => {
+  useEffect(() => {
     const lastSunday = (new Date);
 
     lastSunday.setDate(lastSunday.getDate() - lastSunday.getDay());
     lastSunday.setHours(0, 0, 0, 0);
 
     if (!isLoading) {
-      const thisWeekData = data.filter( repo => repo.created_at && new Date(repo.created_at) > lastSunday);
+      const thisWeekData = data.filter(repo => repo.created_at && new Date(repo.created_at) > lastSunday);
 
-      thisWeekData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      thisWeekData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      thisWeekData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      thisWeekData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setThisWeek(thisWeekData);
 
-      const lastWeekData = data.filter( repo => repo.created_at && new Date(repo.created_at) < lastSunday && new Date(repo.created_at) > new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000));
+      const lastWeekData = data.filter(
+        repo =>
+          repo.created_at &&
+          new Date(repo.created_at) < lastSunday &&
+          new Date(repo.created_at) > new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000),
+      );
 
-      lastWeekData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      lastWeekData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      lastWeekData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      lastWeekData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setLastWeek(lastWeekData);
 
-      const olderData = data.filter( repo => repo.created_at && new Date(repo.created_at) < new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000));
+      const olderData = data.filter(
+        repo =>
+          repo.created_at && new Date(repo.created_at) < new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000),
+      );
 
-      olderData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      olderData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      olderData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      olderData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setOlder(olderData);
     }
   }, [data]);
@@ -72,38 +81,58 @@ const RecentRepoListWrap = (): JSX.Element => {
 
   return (
     <>
-      {!isLoading &&
-        (
+      {isLoading
+        ? (
+          <div className="mx-auto max-w-7xl px-4 mt-10">
+            <div className="flex flex-col gap-y-5 overflow-hidden mb-12">
+              {Array.from(Array(10).keys()).map(item => (
+                <div
+                  key={item}
+                  className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
+                >
+                  <Skeleton
+                    enableAnimation
+                    count={4}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+        : (
           <>
             {/* limit set to 101, a temporary fix to hide "Load More" from "This Week" & "Last Week".
               TODO: Make a real solution for this. */}
 
-            {thisWeek && thisWeek.length > 0 &&
+            {thisWeek && thisWeek.length > 0 && (
               <ListRepositories
                 activeLink={activeLink}
                 fetchedData={thisWeek}
                 handleLoadingMore={handleLoadingMore}
                 limit={101}
                 title="This Week"
-              />}
+              />
+            )}
 
-            {lastWeek && lastWeek.length > 0 &&
+            {lastWeek && lastWeek.length > 0 && (
               <ListRepositories
                 activeLink={activeLink}
                 fetchedData={lastWeek}
                 handleLoadingMore={handleLoadingMore}
                 limit={101}
                 title="Last Week"
-              />}
+              />
+            )}
 
-            {older && older.length > 0 &&
+            {older && older.length > 0 && (
               <ListRepositories
                 activeLink={activeLink}
                 fetchedData={older}
                 handleLoadingMore={handleLoadingMore}
                 limit={limit}
                 title="Older"
-              />}
+              />
+            )}
           </>
         )}
     </>