feat: major performance upgrade

apps/app/components/project/Create.vue

@@ -36,12 +36,13 @@ function removeTeam() {
 }
 
 const {
-  fetchTeams,
-  loading
+  teams,
+  loading,
+  fetchTeams
 } = useTeams()
-fetchTeams()
 
-const teams = useUserTeams()
+if (!teams.value)
+  fetchTeams()
 
 function importProject() {
   const input = document.createElement('input')

apps/app/composables/useProjects.ts

@@ -4,9 +4,16 @@ export const useUserProjects = () => {
   return useState<Project[]>('projects')
 }
 
+export const useCurrentProject = () => {
+  return useState<Project>('currentProject')
+}
+
 export function useProjects() {
   const projects = useUserProjects()
+  const currentProject = useCurrentProject()
+
   const loading = ref(false)
+  const currentLoading = ref(false)
 
   async function fetchProjects() {
     loading.value = true
@@ -16,6 +23,14 @@ export function useProjects() {
     loading.value = false
   }
 
+  async function fetchCurrentProject(projectId: number) {
+    currentLoading.value = true
+    currentProject.value = await $fetch<Project>(`/api/project/${projectId}`, {
+      method: 'GET',
+    })
+    currentLoading.value = false
+  }
+
   async function createProject(createProjectInput: CreateProjectInput) {
     try {
       const response = await $fetch<Project>('/api/project', {
@@ -57,8 +72,11 @@ export function useProjects() {
 
   return {
     projects,
+    currentProject,
     loading,
+    currentLoading,
     fetchProjects,
+    fetchCurrentProject,
     createProject,
     updateProject,
     deleteProject,

apps/app/middleware/set-current-project.global.ts

@@ -0,0 +1,13 @@
+import { useCurrentProject } from '~/composables/useProjects'
+
+export default defineNuxtRouteMiddleware(((to) => {
+  const userProjects = useUserProjects()
+  const currentProject = useCurrentProject()
+  const projectId = to.params.projectId || ''
+  if (to.path === `/app/project/${projectId}`) {
+    const project = userProjects.value.find((project) => project.id === parseInt(projectId as string))
+    if (project) {
+      currentProject.value = project
+    }
+  }
+}))

apps/app/pages/app/project/[projectId]/index.vue

@@ -5,14 +5,18 @@ definePageMeta({
 
 const { projectId } = useRoute().params
 
-const {data: project, status, refresh} = useFetch(`/api/project/${projectId}`, {
-  method: 'GET',
-  watch: false,
-})
+const {
+  currentProject,
+  currentLoading,
+  fetchCurrentProject
+} = useProjects()
+
+if (!currentProject.value)
+  fetchCurrentProject(+projectId)
 
-provide('project', project)
-provide('status', status)
-provide('refresh', refresh)
+provide('project', currentProject)
+provide('loading', currentLoading)
+provide('refresh', fetchCurrentProject)
 
 const links = [
   {
@@ -40,7 +44,7 @@ const links = [
 
 <template>
   <div class="flex flex-col">
-    <ProjectMainSection :project="project" :loading="status === 'pending'" />
+    <ProjectMainSection :project="currentProject" :loading="currentLoading" />
     <UHorizontalNavigation :links="links" class="mt-8 hidden border-b border-gray-200 dark:border-gray-800 md:block" />
     <UVerticalNavigation :links="links" class="mt-8 border-b border-gray-200 pb-2 dark:border-gray-800 md:hidden" />
     <NuxtPage />

apps/app/pages/app/project/[projectId]/index/settings.vue

@@ -7,7 +7,7 @@ const { projectId } = useRoute().params
 const user = useCurrentUser()
 
 const project = inject('project') as Ref<Project>
-const status = inject('status') as Ref<string>
+const loading = inject('loading') as Ref<boolean>
 
 const { status: updateStatus, error: updateError, execute } = useFetch(`/api/project/${projectId}`, {
   method: 'PUT',
@@ -24,7 +24,7 @@ async function updateCurrentProject() {
 
 const {
   fetchTeams,
-  loading
+  loading: teamsLoading
 } = useTeams()
 fetchTeams()
 
@@ -76,7 +76,7 @@ async function removeTeamFromProject(teamId: number) {
           </div>
           <div class="mt-4 flex flex-col gap-4">
             <div>
-              <USkeleton v-if="status === 'pending' || loading" class="h-8" />
+              <USkeleton v-if="teamsLoading && !userTeams" class="h-8" />
               <div v-else>
                 <div v-if="project && projectTeam" class="flex items-center justify-between">
                   <TeamMembers :team-id="project.teamId" :members="projectTeam.members" />
@@ -118,15 +118,15 @@ async function removeTeamFromProject(teamId: number) {
           </div>
           <div class="my-2 flex flex-col gap-4">
             <div>
-              <USkeleton v-if="status === 'pending'" class="h-8" />
+              <USkeleton v-if="loading" class="h-8" />
               <FormGroup v-else v-model="project.repository" label="Repository" class="w-2/3" />
             </div>
             <div>
-              <USkeleton v-if="status === 'pending'" class="h-8" />
+              <USkeleton v-if="loading" class="h-8" />
               <FormGroup v-else v-model="project.projectManager" label="Project Manager" class="w-2/3" />
             </div>
             <div>
-              <USkeleton v-if="status === 'pending'" class="h-8" />
+              <USkeleton v-if="loading" class="h-8" />
               <FormGroup v-else v-model="project.homepage" label="Homepage" class="w-2/3" />
             </div>
           </div>
@@ -143,7 +143,7 @@ async function removeTeamFromProject(teamId: number) {
           </div>
           <div class="my-2 flex flex-col gap-4">
             <div>
-              <USkeleton v-if="status === 'pending'" class="h-8" />
+              <USkeleton v-if="loading" class="h-8" />
               <FormGroup v-else v-model="project.variablePrefix" type="textarea" label="Prefix" class="w-2/3" />
               <UTooltip text="Yes this will be improved in the future 😅">
                 <p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">

apps/app/pages/app/projects.vue

@@ -7,7 +7,8 @@ const {
   fetchProjects,
 } = useProjects()
 
-fetchProjects()
+if (!projects.value)
+  fetchProjects()
 </script>
 
 <template>

apps/app/plugins/analytics.client.ts

@@ -1,5 +1,13 @@
 import { inject } from '@vercel/analytics'
 
 export default defineNuxtPlugin(() => {
-  inject()
+  inject({
+    beforeSend: (event) => {
+      if (event.url.includes('localhost')) {
+        return null
+      }
+      return event
+    },
+    debug: false,
+  })
 })

apps/app/server/api/project/[id]/index.put.ts

@@ -8,9 +8,5 @@ export default eventHandler(async (event: H3Event) => {
   const projectUpdateInput = await readBody(event)
   delete projectUpdateInput.variables
   delete projectUpdateInput.team
-  await updateProject(projectUpdateInput, parseInt(id), user.id)
-  return {
-    statusCode: 200,
-    message: 'Project updated',
-  }
+  return await updateProject(projectUpdateInput, parseInt(id), user.id)
 })