frontend: Added a spinner to the loading indicator. Turned site logo …

…and name to a link.
kkomelin · May 18, 2024 · 2ada75d · 2ada75d
1 parent 4868b4a
commit 2ada75d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/frontend/src/components/GreetingForm.tsx b/packages/frontend/src/components/GreetingForm.tsx
@@ -18,6 +18,7 @@ import useTransact from '~~/hooks/useTransact'
 import useOwnGreeting from '../hooks/useOwnGreeting'
 import CustomConnectButton from './CustomConnectButton'
 import AnimalEmoji from './Emoji'
+import Loading from './Loading'
 
 const GreetingForm = () => {
   const [name, setName] = useState<string>('')
@@ -77,7 +78,7 @@ const GreetingForm = () => {
 
   if (currentAccount == null) return <CustomConnectButton />
 
-  if (isPending) return <TextMessage>Loading...</TextMessage>
+  if (isPending) return <Loading />
 
   // @todo: Handle the following errors with toasts.
   if (error) return <TextMessage>Error: {error.message}</TextMessage>

diff --git a/packages/frontend/src/components/Loading.tsx b/packages/frontend/src/components/Loading.tsx
@@ -0,0 +1,13 @@
+import { Spinner } from '@radix-ui/themes'
+import { FC } from 'react'
+
+const Loading: FC = () => {
+  return (
+    <div className="flex flex-row items-center justify-center gap-2">
+      <Spinner size="3" />
+      Loading...
+    </div>
+  )
+}
+
+export default Loading
diff --git a/packages/frontend/src/components/layout/Header.tsx b/packages/frontend/src/components/layout/Header.tsx
@@ -1,17 +1,21 @@
 import { ConnectButton } from '@mysten/dapp-kit'
+import { Link } from '@radix-ui/themes'
 import Logo from '~~/assets/logo.svg'
 import Balance from '~~/components/Balance'
 import NetworkType from '~~/components/NetworkType'
 
 const Header = () => {
   return (
     <header className="supports-backdrop-blur:bg-white/60 dark:border-slate-50/1 sticky top-0 z-40 flex w-full flex-row flex-wrap items-center justify-center gap-4 bg-white/95 px-3 py-3 backdrop-blur transition-colors duration-500 sm:justify-between sm:gap-3 lg:z-50 lg:border-b lg:border-slate-900/10 dark:bg-transparent">
-      <div className="flex flex-row items-center justify-center gap-1">
+      <Link
+        href="#"
+        className="flex flex-row items-center justify-center gap-1 text-sds-dark outline-none hover:no-underline dark:text-sds-light"
+      >
         <img src={Logo} alt="Logo" className="h-12 w-12" />
-        <div className="text-xl sm:text-2xl">
+        <div className="pt-1 text-xl sm:text-2xl">
           {import.meta.env.VITE_APP_NAME}
         </div>
-      </div>
+      </Link>
 
       <div className="flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row">
         <div className="flex flex-row items-center justify-center gap-3">

diff --git a/packages/frontend/src/hooks/useNetworkType.tsx b/packages/frontend/src/hooks/useNetworkType.tsx
@@ -55,7 +55,6 @@ const useNetworkType = ({
 
     // And this is current app network.
     if (newNetwork != null) {
-      console.log(newNetwork, ctx)
       ctx.selectNetwork(newNetwork)
     }