From 49435c2b50c5f6056801dd033a4f933d5dcfefd0 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Wed, 13 Nov 2024 14:30:58 +0100
Subject: [PATCH 1/3] fix(home): add missing spinners

---
 src/pages/blogs/index.tsx   |  5 ++++-
 src/pages/home.tsx          |  7 ++++++-
 src/pages/profile/index.tsx | 14 ++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index 375f1a8..08d0848 100644
--- a/src/pages/blogs/index.tsx
+++ b/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'
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 1509547..19cbb90 100644
--- a/src/pages/home.tsx
+++ b/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>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 3b6ec70..ca942cf 100644
--- a/src/pages/profile/index.tsx
+++ b/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} />
 
-- 
2.34.1


From 297de3999ccdbd38cdeca454303a1ba5170aab99 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Wed, 13 Nov 2024 15:08:43 +0100
Subject: [PATCH 2/3] fix(comments): hide if missing aTag, force render on blog
 id change

---
 src/components/comment/index.tsx | 3 ++-
 src/pages/blog/index.tsx         | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/comment/index.tsx b/src/components/comment/index.tsx
index 8d7fd93..23daaae 100644
--- a/src/components/comment/index.tsx
+++ b/src/components/comment/index.tsx
@@ -196,7 +196,8 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     <div className='IBMSMSMBSSCommentsWrapper'>
       <h4 className='IBMSMSMBSSTitle'>Comments</h4>
       <div className='IBMSMSMBSSComments'>
-        <CommentForm handleSubmit={handleSubmit} />
+        {/* Hide comment form is aTag is missing */}
+        {!!addressable.aTag && <CommentForm handleSubmit={handleSubmit} />}
         <Filter
           filterOptions={filterOptions}
           setFilterOptions={setFilterOptions}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 65b4466..c2ce709 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -299,6 +299,7 @@ export const BlogPage = () => {
                     )}
                     <div className='IBMSMSplitMainBigSideSec'>
                       <Comments
+                        key={blog.id}
                         addressable={blog as Addressable}
                         setCommentCount={setCommentCount}
                       />
-- 
2.34.1


From 0f874c6bbb173c3704868b9199a88960be8fa7b8 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Wed, 13 Nov 2024 15:12:45 +0100
Subject: [PATCH 3/3] chore: comment typo

---
 src/components/comment/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/comment/index.tsx b/src/components/comment/index.tsx
index 23daaae..c81dd7a 100644
--- a/src/components/comment/index.tsx
+++ b/src/components/comment/index.tsx
@@ -196,7 +196,7 @@ export const Comments = ({ addressable, setCommentCount }: Props) => {
     <div className='IBMSMSMBSSCommentsWrapper'>
       <h4 className='IBMSMSMBSSTitle'>Comments</h4>
       <div className='IBMSMSMBSSComments'>
-        {/* Hide comment form is aTag is missing */}
+        {/* Hide comment form if aTag is missing */}
         {!!addressable.aTag && <CommentForm handleSubmit={handleSubmit} />}
         <Filter
           filterOptions={filterOptions}
-- 
2.34.1