add navbar loading state

HugoRCD · Feb 27, 2025 · b62c458 · b62c458
1 parent 5726e54
commit b62c458
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git a/apps/shelve/app/components/layout/Navbar.vue b/apps/shelve/app/components/layout/Navbar.vue
@@ -21,6 +21,7 @@ const allNavigations = computed(() => {
 const isSearchActive = ref(false)
 const searchQuery = ref('')
 const selectedTeamIndex = ref(0)
+const loading = useNavbarLoading()
 
 const toggleSearch = () => {
   isSearchActive.value = !isSearchActive.value
@@ -77,9 +78,9 @@ defineShortcuts({
   <div class="navbar-wrapper flex flex-col sm:flex-row sm:items-center gap-4">
     <LayoutGroup>
       <Motion :layout="true" class="outline-none">
-        <BgHighlight rounded="full" class="hover:scale-105">
+        <BgHighlight rounded="full" class="hover:scale-105 cursor-pointer" @click="toggleSearch">
           <div class="navbar">
-            <div class="nav-item p-0.5! cursor-pointer" @click="toggleSearch">
+            <div class="nav-item p-0.5!">
               <UIcon :name="isSearchActive ? 'lucide:x' : 'lucide:search'" class="text-lg" />
             </div>
           </div>
@@ -102,7 +103,7 @@ defineShortcuts({
               :exit="{ opacity: 0 }"
               :transition="{ duration: 0.2 }"
             >
-              <UIcon name="lucide:search" class="icon mb-0.5 mr-2" />
+              <UIcon :name="loading ? 'lucide:loader' : 'lucide:search'" class="icon mr-2" :class="loading ? 'animate-spin' : ''" />
               <input
                 id="search-input"
                 v-model="searchQuery"

diff --git a/apps/shelve/app/components/team/Manager.vue b/apps/shelve/app/components/team/Manager.vue
@@ -2,12 +2,13 @@
 import type { CommandItem } from '@types'
 import { AnimatePresence, Motion } from 'motion-v'
 
-const isSearchActive = defineModel<boolean>({ required: false })
-const search = defineModel<string>('search', { required: false })
+const isSearchActive = defineModel<boolean>({ required: true })
+const search = defineModel<string>('search', { required: true })
 const selectedIndex = defineModel<number>('selectedIndex', { required: false, default: 0 })
+const { createTeam } = useTeamsService()
 
 // Command palette setup
-const { commandGroups, createTeamFromSearch, version, subMenuState, deactivateSubMenu } = useAppCommands()
+const { commandGroups, version, subMenuState, deactivateSubMenu } = useAppCommands()
 
 const {
   scrollContainerRef,
@@ -16,7 +17,6 @@ const {
   getItemGlobalIndex,
   navigateUp,
   navigateDown,
-  selectCurrentItem,
   scrollToSelectedItem
 } = useCommandPalette(search, commandGroups, {
   onClose: () => {
@@ -58,7 +58,7 @@ const handleSubmenuAction = (item: CommandItem, index: number) => {
   savedMainMenuIndex = index
 
   // Execute the action (which will activate the submenu)
-  item.action()
+  if (item.action) item.action()
 
   // Reset selection in new submenu
   selectedIndex.value = 0
@@ -193,7 +193,7 @@ function playAction(item: CommandItem, index: number) {
               <CustomButton
                 :label="`Create ${search} team`"
                 loading-auto
-                @click="createTeamFromSearch(search)"
+                @click="createTeam(search)"
               />
             </div>
           </div>

diff --git a/apps/shelve/app/composables/useAppCommands.ts b/apps/shelve/app/composables/useAppCommands.ts
@@ -228,7 +228,7 @@ export function useAppCommands() {
       icon: 'lucide:bug',
       description: 'Report a bug or issue',
       action: () => {
-        window.open('https://github.com/hugorcd/shelve/issues', '_blank')
+        window.open('https://github.com/HugoRCD/shelve/issues/new/choose', '_blank')
       },
       keywords: ['issues', 'bug', 'report', 'problem'],
     },
@@ -321,15 +321,8 @@ export function useAppCommands() {
     ]
   })
 
-  // Helper function to create a team
-  const createTeamFromSearch = async (teamName: string) => {
-    if (!teamName) return
-    await createTeam(teamName)
-  }
-
   return {
     commandGroups,
-    createTeamFromSearch,
     version,
     currentTeam,
     subMenuState,

diff --git a/apps/shelve/app/composables/useStore.ts b/apps/shelve/app/composables/useStore.ts
@@ -43,3 +43,7 @@ export function useEnvironments(): Ref<Environment[]> {
 export function useVariables(projectId: string): Ref<Variable[]> {
   return useState<Variable[]>(`variables-${projectId}`)
 }
+
+export function useNavbarLoading(): Ref<boolean> {
+  return useState<boolean>('navbar-loading', () => false)
+}
diff --git a/apps/shelve/app/composables/useTeams.ts b/apps/shelve/app/composables/useTeams.ts
@@ -22,6 +22,7 @@ export function useTeamsService() {
   const currentTeam = useTeam()
   const loading = ref(false)
   const createLoading = ref(false)
+  const navbarLoading = useNavbarLoading()
 
   const defaultTeamSlug = useCookie<string>('defaultTeamSlug')
 
@@ -50,6 +51,7 @@ export function useTeamsService() {
 
   async function createTeam(name: string): Promise<Team | undefined> {
     createLoading.value = true
+    navbarLoading.value = true
     try {
       const team = await $fetch<Team>('/api/teams', {
         method: 'POST',
@@ -67,6 +69,7 @@ export function useTeamsService() {
         toast.error('Failed to create team')
     } finally {
       createLoading.value = false
+      navbarLoading.value = false
     }
   }