Merge pull request #38 from danielvanc/dev

Dev
danielvanc · Jan 24, 2025 · e2e9250 · e2e9250
2 parents 4511c77 + fc5251e
commit e2e9250
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 43 deletions.
diff --git a/app/components/ui/loading/skeleton-news.tsx b/app/components/ui/loading/skeleton-news.tsx
@@ -0,0 +1,27 @@
+export default function SkeletonNews({
+  blocksToShow = 10,
+}: {
+  blocksToShow?: number;
+}) {
+  const blocks = Array.from({ length: blocksToShow }, (_, i) => i);
+
+  return (
+    <>
+      <div className="relative backdrop-filter backdrop-blur-lg shadow-md bg-gray-100 h-8 mb-4 w-2/4 rounded-lg bg-opacity-10"></div>
+      <div className="space-x-4 w-full">
+        <div className="relative  rounded-lg">
+          {blocks.map((_, idx) => (
+            <div
+              key={`s-${idx}`}
+              className="flex flex-row items-start mb-4 space-x-2  animate-pulse bg-opacity-10"
+            >
+              <div className="mx-auto h-8 w-full rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md bg-gray-100">
+                &nbsp;
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/ui/loading/skeleton-standings.tsx b/app/components/ui/loading/skeleton-standings.tsx
@@ -0,0 +1,39 @@
+export default function SkeletonStandings({
+  blocksToShow = 15,
+}: {
+  blocksToShow?: number;
+}) {
+  const blocks = Array.from({ length: blocksToShow }, (_, i) => i);
+
+  return (
+    <>
+      <div className="relative  animate-pulse rounded-lg bg-gray-100 bg-opacity-10 backdrop-filter backdrop-blur-lg shadow h-8 mb-2 w-2/4"></div>
+      <div className="flex animate-pulse space-x-4 w-full">
+        <div className="relative w-1/2  rounded-lg bg-gray-100 bg-opacity-10 backdrop-filter backdrop-blur-lg shadow">
+          {blocks.map((_, idx) => (
+            <div
+              key={`s-${idx}`}
+              className="flex flex-row items-start p-2 space-x-2"
+            >
+              <div className="mx-auto h-14 w-full rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
+                &nbsp;
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="relative w-1/2 rounded-lg bg-gray-100 bg-opacity-10 backdrop-filter backdrop-blur-lg shadow">
+          {blocks.map((_, idx) => (
+            <div
+              key={`s-${idx}`}
+              className="flex flex-row items-start p-2 space-x-2"
+            >
+              <div className="mx-auto h-14 w-full rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
+                &nbsp;
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/ui/loading/skeleton-todays-games.tsx b/app/components/ui/loading/skeleton-todays-games.tsx
@@ -1,5 +1,5 @@
 export default function SkeletonTodaysGames({
-  blocksToShow = 5,
+  blocksToShow = 8,
 }: {
   blocksToShow?: number;
 }) {
@@ -14,13 +14,13 @@ export default function SkeletonTodaysGames({
             key={`s-${idx}`}
             className="flex flex-row items-start p-2 space-x-2"
           >
-            <div className="mx-auto h-24 w-2/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
+            <div className="mx-auto h-14 w-2/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
               &nbsp;
             </div>
-            <div className="mx-auto h-24 w-1/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
+            <div className="mx-auto h-14 w-1/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
               &nbsp;
             </div>
-            <div className="mx-auto h-24 w-2/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
+            <div className="mx-auto h-14 w-2/5 rounded-lg bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-md">
               &nbsp;
             </div>
           </div>

diff --git a/app/config/api.ts b/app/config/api.ts
@@ -4,5 +4,5 @@ export const endpoints = {
   latestStandings: "https://stats.nba.com/stats/leaguestandingsv3",
   upcomingGames:
     "https://cdn.nba.com/static/json/staticData/scheduleLeagueV2_1.json",
-  latestNews: "https://nba-stories.onrender.com/articles?source=nba&limit=10",
+  latestNews: "https://nba-stories.onrender.com/articles",
 };
diff --git a/app/mocks/latestNews.ts b/app/mocks/latestNews.ts
@@ -29,41 +29,31 @@ export const latestNews: Array<HttpHandler> = [
         url: "https://www.nba.com/news/hornets-brandon-miller-out-for-season-torn-ligament-right-wrist",
         source: "nba",
       },
-      // {
-      //   title: "Nightly Pulse: NBA news & highlights from Jan. 23",
-      //   url: "https://www.nba.com/news/nightly-pulse-nba-news-highlights-from-jan-23",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "Magic's Franz Wagner (oblique) available vs. Blazers",
-      //   url: "https://www.nba.com/news/magic-franz-wagner-returns-after-20-game-absence",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "Heat-Bucks game delayed an hour due to travel",
-      //   url: "https://www.nba.com/news/bucks-heat-game-delayed-an-hour-due-to-travel",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "NBA Fantasy – Salary Cap Edition: Midseason Top 5",
-      //   url: "https://www.nba.com/news/nba-fantasy-salary-cap-edition-midseason-top-5",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "Tissot expands partnership with NBA, WNBA, G League",
-      //   url: "https://www.nba.com/news/tissot-expands-global-multiyear-marketing-partnership-nba-wnba-g-league",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "5 takeaways: NBA All-Star starters revealed",
-      //   url: "https://www.nba.com/news/2025-all-star-starters-takeaways",
-      //   source: "nba",
-      // },
-      // {
-      //   title: "Silver: NBA looking at expanding footprint in Europe",
-      //   url: "https://www.nba.com/news/adam-silver-paris-news-conference-ap",
-      //   source: "nba",
-      // },
+      {
+        title: "Nightly Pulse: NBA news & highlights from Jan. 23",
+        url: "https://www.nba.com/news/nightly-pulse-nba-news-highlights-from-jan-23",
+        source: "nba",
+      },
+      {
+        title: "Magic's Franz Wagner (oblique) available vs. Blazers",
+        url: "https://www.nba.com/news/magic-franz-wagner-returns-after-20-game-absence",
+        source: "nba",
+      },
+      {
+        title: "Heat-Bucks game delayed an hour due to travel",
+        url: "https://www.nba.com/news/bucks-heat-game-delayed-an-hour-due-to-travel",
+        source: "nba",
+      },
+      {
+        title: "NBA Fantasy – Salary Cap Edition: Midseason Top 5",
+        url: "https://www.nba.com/news/nba-fantasy-salary-cap-edition-midseason-top-5",
+        source: "nba",
+      },
+      {
+        title: "Tissot expands partnership with NBA, WNBA, G League",
+        url: "https://www.nba.com/news/tissot-expands-global-multiyear-marketing-partnership-nba-wnba-g-league",
+        source: "nba",
+      },
     ]);
   }),
 ];
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
@@ -21,6 +21,8 @@ import UpcomingGames from "~/components/upcomingGames";
 import { getLatestNews, type NewsItem } from "~/utils/news";
 import LatestNews from "~/components/latestNews";
 import StandingsList from "~/components/standings-list";
+import SkeletonStandings from "~/components/ui/loading/skeleton-standings";
+import SkeletonNews from "~/components/ui/loading/skeleton-news";
 
 export function meta() {
   return [
@@ -104,7 +106,7 @@ export default function Home({
       </div>
       <div className="lg:w-2/4">
         <div className="mb-10">
-          <React.Suspense fallback={<SkeletonTodaysGames />}>
+          <React.Suspense fallback={<SkeletonStandings />}>
             <Await resolve={latestStandings}>
               {(latestStandings) => (
                 <LatestStandings>
@@ -125,7 +127,7 @@ export default function Home({
         </div>
 
         <div className="mb-10">
-          <React.Suspense fallback={<SkeletonTodaysGames />}>
+          <React.Suspense fallback={<SkeletonNews />}>
             <Await resolve={latestNews}>
               {(latestNews) => <LatestNews data={latestNews} />}
             </Await>

diff --git a/app/utils/news.ts b/app/utils/news.ts
@@ -7,7 +7,7 @@ export interface NewsItem {
 
 export async function getLatestNews() {
   // TODO: Add Error Handling
-  const response = await fetch(endpoints.latestNews);
+  const response = await fetch(`${endpoints.latestNews}?source=nba&limit=10`);
   const json = await response.json();
 
   return json;