feat: add loaders for Settings page and News Monitor page links

Author: Ni-2

apps/xen-tg-app/src/App.tsx

@@ -1,21 +1,36 @@
-import { Link } from 'react-router'
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
 import SettingsIcon from './assets/settings'
-import XEN_IMAGE from '/xen.png'
 import Capabilities from './components/Capabilities'
+import Spinner from './components/Spinner'
 import Wallet from './components/Wallet'
+import XEN_IMAGE from '/xen.png'
 
 const App = () => {
+  const [isWaiting, setIsWaiting] = useState(false)
+  const navigate = useNavigate()
   const tg = window.Telegram.WebApp
   if (!tg.isExpanded) tg.expand()
 
   return (
     <>
-      <Link
-        to="/settings"
-        className="absolute top-5 right-4 rounded-full border border-(--color-opposite-text) bg-(--color-light-white-bg) p-2 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30"
+      <button
+        role="link"
+        onClick={() => {
+          setIsWaiting(true)
+          navigate('/settings')
+        }}
+        disabled={isWaiting}
+        className="absolute top-5 right-4 h-9.5 w-9.5 rounded-full border border-(--color-opposite-text) bg-(--color-light-white-bg) p-2 backdrop-blur-3xl backdrop-opacity-80 dark:border-(--color-main-text)/30"
       >
-        <SettingsIcon />
-      </Link>
+        {isWaiting ? (
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner />
+          </div>
+        ) : (
+          <SettingsIcon />
+        )}
+      </button>
       <div className="z-1 m-2.5 flex w-[210px] justify-center overflow-hidden rounded-full border border-(--color-opposite-text) select-none dark:border-(--color-main-text)/30">
         <img src={XEN_IMAGE} alt="xen-photo" className="h-full w-full" />
       </div>

apps/xen-tg-app/src/components/Agent.tsx

@@ -1,4 +1,4 @@
-import { FC, startTransition, useEffect, useMemo } from 'react'
+import { FC, startTransition, useEffect, useMemo, useState } from 'react'
 // import UnlinkOutlineIcon from '../assets/unlink-outline'
 import ArrowForwardIcon from '@/assets/arrow-forward'
 import { Switch } from '@/components/ui/switch'
@@ -42,6 +42,7 @@ type TAgentProps = {
 }
 
 const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
+  const [isWaiting, setIsWaiting] = useState(false)
   const navigate = useNavigate()
   const queryClient = useQueryClient()
 
@@ -55,7 +56,10 @@ const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
   const action = useMemo(() => {
     // ToDo: better to use capabilitiy.id?
     if (capabilitiy.name === 'news-monitor')
-      return () => startTransition(() => navigate('/news-monitor'))
+      return () => {
+        setIsWaiting(true)
+        startTransition(() => navigate('/news-monitor'))
+      }
   }, [capabilitiy, navigate])
 
   const handleChangeStatus = () =>
@@ -83,9 +87,13 @@ const Agent: FC<TAgentProps> = ({ capabilitiy }) => {
         <div className="group flex items-center gap-2 pt-1 pb-0.25 text-left text-[14px]/[125%] font-semibold wrap-anywhere">
           {capabilitiy.title ?? capabilitiy.name}
           {action ? (
-            <div className="text-(--color-gray-text) transition group-hover:text-(--color-main-text)">
-              <ArrowForwardIcon />
-            </div>
+            isWaiting ? (
+              <span className="h-3 w-3 animate-spin rounded-[6px] border-2 border-(--color-opposite-text) border-b-(--color-gray-text)"></span>
+            ) : (
+              <div className="text-(--color-gray-text) transition group-hover:text-(--color-main-text)">
+                <ArrowForwardIcon />
+              </div>
+            )
           ) : null}
         </div>
         {capabilitiy.title ? (

apps/xen-tg-app/src/main.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { lazy, StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router'
@@ -67,7 +67,7 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   </StrictMode>
 )