[FA-18] Adjustments based on feeback

fictionarchive-web/src/pages/NovelsPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 
 import { useNovelsQuery } from '../__generated__/graphql'
 import { NovelCard } from '../components/NovelCard'
@@ -8,9 +8,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'
 const PAGE_SIZE = 12
 
 export function NovelsPage() {
-  const [after, setAfter] = useState<string | null>(null)
   const { data, loading, error, fetchMore } = useNovelsQuery({
-    variables: { first: PAGE_SIZE, after },
+    variables: { first: PAGE_SIZE, after: null },
     notifyOnNetworkStatusChange: true,
   })
 
@@ -26,7 +25,7 @@ export function NovelsPage() {
 
   async function handleLoadMore() {
     if (!hasNextPage || !endCursor) return
-    const result = await fetchMore({
+    await fetchMore({
       variables: { after: endCursor, first: PAGE_SIZE },
       updateQuery: (prev, { fetchMoreResult }) => {
         if (!fetchMoreResult?.novels?.edges) return prev
@@ -43,8 +42,6 @@ export function NovelsPage() {
         }
       },
     })
-
-    setAfter(result.data?.novels?.pageInfo?.endCursor ?? null)
   }
 
   return (
@@ -61,9 +58,9 @@ export function NovelsPage() {
       {loading && !data && (
         <Card>
           <CardContent>
-            <p className="py-4 text-sm text-muted-foreground">
-              Loading novels...
-            </p>
+            <div className="flex items-center justify-center py-8">
+              <div className="h-10 w-10 animate-spin rounded-full border-2 border-primary border-t-transparent" aria-label="Loading novels" />
+            </div>
           </CardContent>
         </Card>
       )}