refactor(mods): use loader to preload lists

src/pages/home.tsx

@@ -430,9 +430,7 @@ const DisplayLatestBlogs = () => {
 
   return (
     <div className='IBMSecMain IBMSMListWrapper'>
-      {navigation.state !== 'idle' && (
-        <LoadingSpinner desc={'Fetching blog...'} />
-      )}
+      {navigation.state !== 'idle' && <LoadingSpinner desc={'Fetching...'} />}
       <div className='IBMSMTitleMain'>
         <h2 className='IBMSMTitleMainHeading'>Blog Posts</h2>
       </div>

src/pages/mods/index.tsx

@@ -1,34 +1,34 @@
 import { ModFilter } from 'components/Filters/ModsFilter'
 import { Pagination } from 'components/Pagination'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { createSearchParams, useNavigate } from 'react-router-dom'
-import { LoadingSpinner } from '../components/LoadingSpinner'
-import { ModCard } from '../components/ModCard'
-import { MOD_FILTER_LIMIT } from '../constants'
+import {
+  createSearchParams,
+  useLoaderData,
+  useNavigate
+} from 'react-router-dom'
+import { LoadingSpinner } from '../../components/LoadingSpinner'
+import { ModCard } from '../../components/ModCard'
+import { MOD_FILTER_LIMIT } from '../../constants'
 import {
   useAppSelector,
   useFilteredMods,
   useLocalStorage,
-  useMuteLists,
-  useNDKContext,
-  useNSFWList
-} from '../hooks'
-import { appRoutes } from '../routes'
-import '../styles/filters.css'
-import '../styles/pagination.css'
-import '../styles/search.css'
-import '../styles/styles.css'
-import { FilterOptions, ModDetails } from '../types'
-import {
-  CurationSetIdentifiers,
-  DEFAULT_FILTER_OPTIONS,
-  scrollIntoView
-} from 'utils'
+  useNDKContext
+} from '../../hooks'
+import { appRoutes } from '../../routes'
+import '../../styles/filters.css'
+import '../../styles/pagination.css'
+import '../../styles/search.css'
+import '../../styles/styles.css'
+import { FilterOptions, ModDetails } from '../../types'
+import { DEFAULT_FILTER_OPTIONS, scrollIntoView } from 'utils'
 import { SearchInput } from 'components/SearchInput'
-import { useCuratedSet } from 'hooks/useCuratedSet'
+import { ModsPageLoaderResult } from './loader'
 
 export const ModsPage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
+  const { repostList, muteLists, nsfwList } =
+    useLoaderData() as ModsPageLoaderResult
   const { fetchMods } = useNDKContext()
   const [isFetching, setIsFetching] = useState(false)
   const [mods, setMods] = useState<ModDetails[]>([])
@@ -37,9 +37,6 @@ export const ModsPage = () => {
     'filter',
     DEFAULT_FILTER_OPTIONS
   )
-  const muteLists = useMuteLists()
-  const nsfwList = useNSFWList()
-  const repostList = useCuratedSet(CurationSetIdentifiers.Repost)
 
   const [page, setPage] = useState(1)
 

src/pages/mods/loader.ts

@@ -0,0 +1,77 @@
+import { NDKContextType } from 'contexts/NDKContext'
+import { store } from 'store'
+import { MuteLists } from 'types'
+import { getReportingSet, CurationSetIdentifiers, log, LogType } from 'utils'
+
+export interface ModsPageLoaderResult {
+  muteLists: {
+    admin: MuteLists
+    user: MuteLists
+  }
+  nsfwList: string[]
+  repostList: string[]
+}
+
+export const modsRouteLoader = (ndkContext: NDKContextType) => async () => {
+  // Empty result
+  const result: ModsPageLoaderResult = {
+    muteLists: {
+      admin: {
+        authors: [],
+        replaceableEvents: []
+      },
+      user: {
+        authors: [],
+        replaceableEvents: []
+      }
+    },
+    nsfwList: [],
+    repostList: []
+  }
+
+  // Get the current state
+  const userState = store.getState().user
+
+  // Check if current user is logged in
+  let userPubkey: string | undefined
+  if (userState.auth && userState.user?.pubkey) {
+    userPubkey = userState.user.pubkey as string
+  }
+
+  const settled = await Promise.allSettled([
+    ndkContext.getMuteLists(userPubkey),
+    getReportingSet(CurationSetIdentifiers.NSFW, ndkContext),
+    getReportingSet(CurationSetIdentifiers.Repost, ndkContext)
+  ])
+
+  // Check the mutelist event result
+  const muteListResult = settled[0]
+  if (muteListResult.status === 'fulfilled' && muteListResult.value) {
+    result.muteLists = muteListResult.value
+  } else if (muteListResult.status === 'rejected') {
+    log(true, LogType.Error, 'Failed to fetch mutelist.', muteListResult.reason)
+  }
+
+  // Check the nsfwlist event result
+  const nsfwListResult = settled[1]
+  if (nsfwListResult.status === 'fulfilled' && nsfwListResult.value) {
+    result.nsfwList = nsfwListResult.value
+  } else if (nsfwListResult.status === 'rejected') {
+    log(true, LogType.Error, 'Failed to fetch nsfwlist.', nsfwListResult.reason)
+  }
+
+  // Check the repostlist event result
+  const repostListResult = settled[2]
+  if (repostListResult.status === 'fulfilled' && repostListResult.value) {
+    result.repostList = repostListResult.value
+  } else if (repostListResult.status === 'rejected') {
+    log(
+      true,
+      LogType.Error,
+      'Failed to fetch repost list.',
+      repostListResult.reason
+    )
+  }
+
+  return result
+}

src/routes/index.tsx

@@ -7,6 +7,7 @@ import { GamesPage } from '../pages/games'
 import { HomePage } from '../pages/home'
 import { ModsPage } from '../pages/mods'
 import { ModPage } from '../pages/mod'
+import { modsRouteLoader } from '../pages/mods/loader'
 import { modRouteLoader } from '../pages/mod/loader'
 import { modRouteAction } from '../pages/mod/action'
 import { SubmitModPage } from '../pages/submitMod'
@@ -87,7 +88,8 @@ export const routerWithNdkContext = (context: NDKContextType) =>
         },
         {
           path: appRoutes.mods,
-          element: <ModsPage />
+          element: <ModsPage />,
+          loader: modsRouteLoader(context)
         },
         {
           path: appRoutes.mod,