diff --git a/app/components/ui/loading/skeleton-news.tsx b/app/components/ui/loading/skeleton-news.tsx new file mode 100644 index 0000000..5b429fa --- /dev/null +++ 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 ( + <> +
+
+
+ {blocks.map((_, idx) => ( +
+
+   +
+
+ ))} +
+
+ + ); +} diff --git a/app/components/ui/loading/skeleton-standings.tsx b/app/components/ui/loading/skeleton-standings.tsx new file mode 100644 index 0000000..c7948d8 --- /dev/null +++ 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 ( + <> +
+
+
+ {blocks.map((_, idx) => ( +
+
+   +
+
+ ))} +
+
+ {blocks.map((_, idx) => ( +
+
+   +
+
+ ))} +
+
+ + ); +} diff --git a/app/components/ui/loading/skeleton-todays-games.tsx b/app/components/ui/loading/skeleton-todays-games.tsx index 86e0507..f3a5c68 100644 --- 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" > -
+
 
-
+
 
-
+
 
diff --git a/app/config/api.ts b/app/config/api.ts index 29ef458..7bcfa1c 100644 --- 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 index 192fb40..bf5487b 100644 --- a/app/mocks/latestNews.ts +++ b/app/mocks/latestNews.ts @@ -29,41 +29,31 @@ export const latestNews: Array = [ 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 index 25c9b34..5aa631c 100644 --- 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({
- }> + }> {(latestStandings) => ( @@ -125,7 +127,7 @@ export default function Home({
- }> + }> {(latestNews) => } diff --git a/app/utils/news.ts b/app/utils/news.ts index 3656113..1bb6cff 100644 --- 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;