diff --git a/src/components/Relay/index.tsx b/src/components/Relay/index.tsx
index 8f7c945f..2fa9bb8f 100644
--- a/src/components/Relay/index.tsx
+++ b/src/components/Relay/index.tsx
@@ -3,7 +3,6 @@ import RelayInfo from '@/components/RelayInfo'
 import SearchInput from '@/components/SearchInput'
 import { useFetchRelayInfo } from '@/hooks'
 import { normalizeUrl } from '@/lib/url'
-import { cn } from '@/lib/utils'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import NotFound from '../NotFound'
@@ -30,8 +29,8 @@ export default function Relay({ url, className }: { url?: string; className?: st
   }
 
   return (
-    <div className={cn('pt-3', className)}>
-      <RelayInfo url={normalizedUrl} />
+    <div className={className}>
+      <RelayInfo url={normalizedUrl} className="pt-3" />
       {relayInfo?.supported_nips?.includes(50) && (
         <div className="px-4 py-2">
           <SearchInput
diff --git a/src/components/RelayInfo/index.tsx b/src/components/RelayInfo/index.tsx
index 9a03ce22..8950dc50 100644
--- a/src/components/RelayInfo/index.tsx
+++ b/src/components/RelayInfo/index.tsx
@@ -2,6 +2,7 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { useFetchRelayInfo } from '@/hooks'
 import { normalizeHttpUrl } from '@/lib/url'
+import { cn } from '@/lib/utils'
 import { GitBranch, Mail, SquareCode } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +12,7 @@ import RelayIcon from '../RelayIcon'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
 
-export default function RelayInfo({ url }: { url: string }) {
+export default function RelayInfo({ url, className }: { url: string; className?: string }) {
   const { t } = useTranslation()
   const { relayInfo, isFetching } = useFetchRelayInfo(url)
   const [open, setOpen] = useState(false)
@@ -21,7 +22,7 @@ export default function RelayInfo({ url }: { url: string }) {
   }
 
   return (
-    <div className="px-4 space-y-4 mb-2">
+    <div className={cn('px-4 space-y-4 mb-2', className)}>
       <div className="space-y-2">
         <div className="flex gap-2 items-center">
           <RelayIcon url={url} className="w-8 h-8" />
diff --git a/src/components/ReplyNoteList/index.tsx b/src/components/ReplyNoteList/index.tsx
index f87acba2..20547b5e 100644
--- a/src/components/ReplyNoteList/index.tsx
+++ b/src/components/ReplyNoteList/index.tsx
@@ -284,7 +284,7 @@ export default function ReplyNoteList({ index, event }: { index?: number; event:
 
   return (
     <div className="min-h-[80vh]">
-      {loading && (replies.length === 0 ? <ReplyNoteSkeleton /> : <LoadingBar />)}
+      {loading && <LoadingBar />}
       {!loading && until && (
         <div
           className={`text-sm text-center text-muted-foreground border-b py-2 ${!loading ? 'hover:text-foreground cursor-pointer' : ''}`}
@@ -338,6 +338,7 @@ export default function ReplyNoteList({ index, event }: { index?: number; event:
         </div>
       )}
       <div ref={bottomRef} />
+      {loading && <ReplyNoteSkeleton />}
     </div>
   )
 }