previde feedback on navigation (#400)

papermerge · Jul 6, 2024 · 2513024 · 2513024
1 parent bb45cea
commit 2513024
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 41 deletions.
diff --git a/ui2/src/components/NavBar/NavBar.tsx b/ui2/src/components/NavBar/NavBar.tsx
@@ -7,7 +7,7 @@ import {
   IconUsers,
   IconUsersGroup
 } from "@tabler/icons-react"
-import {Group} from "@mantine/core"
+import {Group, Loader} from "@mantine/core"
 import {
   selectCurrentUser,
   selectCurrentUserStatus,
@@ -35,32 +35,17 @@ function NavBarFull() {
     <>
       <div className="navbar">
         <NavLink to={`/home/${user.home_folder_id}`}>
-          <Group>
-            <IconHome /> Home
-          </Group>
+          {NavLinkWithFeedback("Home", <IconHome />)}
         </NavLink>
         <NavLink to={`/inbox/${user.inbox_folder_id}`}>
-          <Group>
-            <IconInbox /> Inbox
-          </Group>
-        </NavLink>
-        <NavLink to="/tags">
-          <Group>
-            <IconTag />
-            Tags
-          </Group>
+          {NavLinkWithFeedback("Inbox", <IconInbox />)}
         </NavLink>
+        <NavLink to="/tags">{NavLinkWithFeedback("Tags", <IconTag />)}</NavLink>
         <NavLink to="/users">
-          <Group>
-            <IconUsers />
-            Users
-          </Group>
+          {NavLinkWithFeedback("Users", <IconUsers />)}
         </NavLink>
         <NavLink to="/groups">
-          <Group>
-            <IconUsersGroup />
-            Groups
-          </Group>
+          {NavLinkWithFeedback("Groups", <IconUsersGroup />)}
         </NavLink>
       </div>
     </>
@@ -84,29 +69,15 @@ function NavBarCollapsed() {
     <>
       <div className="navbar">
         <NavLink to={`/home/${user.home_folder_id}`}>
-          <Group>
-            <IconHome />
-          </Group>
+          {NavLinkWithFeedbackShort(<IconHome />)}
         </NavLink>
         <NavLink to={`/inbox/${user.inbox_folder_id}`}>
-          <Group>
-            <IconInbox />
-          </Group>
-        </NavLink>
-        <NavLink to="/tags">
-          <Group>
-            <IconTag />
-          </Group>
-        </NavLink>
-        <NavLink to="/users">
-          <Group>
-            <IconUsers />
-          </Group>
+          {NavLinkWithFeedbackShort(<IconInbox />)}
         </NavLink>
+        <NavLink to="/tags">{NavLinkWithFeedbackShort(<IconTag />)}</NavLink>
+        <NavLink to="/users">{NavLinkWithFeedbackShort(<IconUsers />)}</NavLink>
         <NavLink to="/groups">
-          <Group>
-            <IconUsersGroup />
-          </Group>
+          {NavLinkWithFeedbackShort(<IconUsersGroup />)}
         </NavLink>
       </div>
     </>
@@ -123,4 +94,55 @@ function NavBar() {
   return <NavBarFull />
 }
 
+type NavLinkState = {
+  isActive: boolean
+  isPending: boolean
+}
+
+type ResponsiveLink = ({isActive, isPending}: NavLinkState) => JSX.Element
+
+function NavLinkWithFeedback(text: string, icon: JSX.Element): ResponsiveLink {
+  return ({isActive, isPending}) => {
+    if (isActive) {
+      return (
+        <Group>
+          {icon}
+          {text}
+        </Group>
+      )
+    }
+    if (isPending) {
+      return (
+        <Group>
+          {icon}
+          {text}
+          <Loader size={"sm"} />
+        </Group>
+      )
+    }
+    return (
+      <Group>
+        {icon}
+        {text}
+      </Group>
+    )
+  }
+}
+
+function NavLinkWithFeedbackShort(icon: JSX.Element): ResponsiveLink {
+  return ({isActive, isPending}) => {
+    if (isActive) {
+      return <Group>{icon}</Group>
+    }
+    if (isPending) {
+      return (
+        <Group>
+          <Loader size={"sm"} />
+        </Group>
+      )
+    }
+    return <Group>{icon}</Group>
+  }
+}
+
 export default NavBar
diff --git a/ui2/src/slices/navBar.ts b/ui2/src/slices/navBar.ts
@@ -2,7 +2,7 @@ import {createSlice} from "@reduxjs/toolkit"
 import {RootState} from "@/app/types"
 
 const COLLAPSED_WIDTH = 55
-const FULL_WIDTH = 150
+const FULL_WIDTH = 160
 
 interface NavBar {
   collapsed: boolean