feat: implement Suspense and Await for improved data loading in carousel components

app/routes/_news._index.tsx

@@ -25,31 +25,22 @@ export const loader = async ({}: Route.LoaderArgs) => {
     (category) => category.code === kajianCode,
   )
 
-  let { data: spotlightNews } = await getNews({
+  const spotlightData = getNews({
     categories: [spotlightCode],
   })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
-  let { data: beritaNews } = await getNews({
+  const beritaData = getNews({
     categories: [beritaCode],
   })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
-  let { data: kajianNews } = await getNews({
+  const kajianData = getNews({
     categories: [kajianCode],
   })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
-
   return {
     spotlightCategory,
-    spotlightCode,
     beritaCategory,
-    beritaCode,
     kajianCategory,
-    kajianCode,
-    spotlightNews,
-    beritaNews,
-    kajianNews,
+    spotlightData,
+    beritaData,
+    kajianData,
   }
 }