feat: refactor subscription handling in registration form and header component

app/layouts/news/header-top.tsx

@@ -3,11 +3,12 @@ import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_layout'
+import { loader } from '~/routes/_layout'
 
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userToken = loaderData?.userToken
   const fetcher = useFetcher()
 
   return (
@@ -29,7 +30,7 @@ export const HeaderTop = () => {
         <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
           About Us
         </Button>
-        {loaderData?.userToken ? (
+        {userToken ? (
           <fetcher.Form
             method="POST"
             action="/actions/logout"