src/pages/blogs/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState } from 'react'
-import { useLoaderData, useSearchParams } from 'react-router-dom'
+import { useLoaderData, useNavigation, useSearchParams } from 'react-router-dom'
 import { useLocalStorage } from 'hooks'
 import { BlogCardDetails, NSFWFilter, SortBy } from 'types'
 import { SearchInput } from '../../components/SearchInput'
@@ -10,8 +10,10 @@ import '../../styles/search.css'
 import '../../styles/styles.css'
 import { PaginationWithPageNumbers } from 'components/Pagination'
 import { scrollIntoView } from 'utils'
+import { LoadingSpinner } from 'components/LoadingSpinner'
 
 export const BlogsPage = () => {
+  const navigation = useNavigation()
   const blogs = useLoaderData() as Partial<BlogCardDetails>[] | undefined
   const [filterOptions, setFilterOptions] = useLocalStorage(
     'filter-blog-curated',
@@ -105,6 +107,7 @@ export const BlogsPage = () => {
 
   return (
     <div className='InnerBodyMain'>
+      {navigation.state !== 'idle' && <LoadingSpinner desc={'Loading'} />}
       <div className='ContainerMain'>
         <div
           className='IBMSecMainGroup IBMSecMainGroupAlt'

src/pages/home.tsx

@@ -1,6 +1,6 @@
 import { kinds, nip19 } from 'nostr-tools'
 import { useMemo, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useNavigation } from 'react-router-dom'
 import { A11y, Autoplay, Navigation, Pagination } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { BlogCard } from '../components/BlogCard'
@@ -35,6 +35,7 @@ import { NDKFilter } from '@nostr-dev-kit/ndk'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
+import { LoadingSpinner } from 'components/LoadingSpinner'
 
 export const HomePage = () => {
   const navigate = useNavigate()
@@ -324,6 +325,7 @@ const DisplayLatestBlogs = () => {
     sort: SortBy.Latest,
     nsfw: NSFWFilter.Hide_NSFW
   })
+  const navigation = useNavigation()
   useDidMount(() => {
     const fetchBlogs = async () => {
       try {
@@ -425,6 +427,9 @@ const DisplayLatestBlogs = () => {
 
   return (
     <div className='IBMSecMain IBMSMListWrapper'>
+      {navigation.state !== 'idle' && (
+        <LoadingSpinner desc={'Fetching blog...'} />
+      )}
       <div className='IBMSMTitleMain'>
         <h2 className='IBMSMTitleMainHeading'>Blog Posts</h2>
       </div>

src/pages/profile/index.tsx

@@ -16,7 +16,13 @@ import {
 } from 'hooks'
 import { kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useParams, Navigate, Link, useLoaderData } from 'react-router-dom'
+import {
+  useParams,
+  Navigate,
+  Link,
+  useLoaderData,
+  useNavigation
+} from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { appRoutes, getProfilePageRoute } from 'routes'
 import {
@@ -262,6 +268,7 @@ export const ProfilePage = () => {
     setIsLoading(true)
     switch (tab) {
       case 0:
+        setLoadingSpinnerDesc('Fetching mods..')
         fetchMods({ source: filterOptions.source, author: profilePubkey })
           .then((res) => {
             setMods(res)
@@ -690,6 +697,7 @@ const ReportUserPopup = ({
 const ProfileTabBlogs = () => {
   const { profile, muteLists, nsfwList } =
     useLoaderData() as ProfilePageLoaderResult
+  const navigation = useNavigation()
   const { fetchEvents } = useNDKContext()
   const [filterOptions] = useLocalStorage('filter-blog', DEFAULT_FILTER_OPTIONS)
   const [isLoading, setIsLoading] = useState(true)
@@ -848,7 +856,9 @@ const ProfileTabBlogs = () => {
 
   return (
     <>
-      {isLoading && <LoadingSpinner desc={'Fetching blogs...'} />}
+      {(isLoading || navigation.state !== 'idle') && (
+        <LoadingSpinner desc={'Loading...'} />
+      )}
 
       <ModFilter filterKey={'filter-blog'} author={profile?.pubkey as string} />