fix(platform): commit detail history before presentation

Author: emir-karabeg

apps/sim/platform/app/(shell)/integrations/_components/fixtures/integration-details/integration-details.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useTransition } from 'react'
 import { generateId } from '@sim/utils/id'
 import Link from 'next/link'
 import { useQueryStates } from 'nuqs'
@@ -53,12 +53,15 @@ export function IntegrationDetails({
   onAddSkill,
 }: IntegrationDetailsProps) {
   const [view, setView] = useQueryStates(credentialParams)
+  const [isOpening, startOpening] = useTransition()
   const [enrollment, setEnrollment] = useState<{
     connection: CredentialConnection
     credential?: IntegrationCredential
   } | null>(null)
   const [disconnecting, setDisconnecting] = useState<IntegrationCredential | null>(null)
-  const selected = integration.credentials.find((credential) => credential.id === view.credential)
+  const selected = isOpening
+    ? undefined
+    : integration.credentials.find((credential) => credential.id === view.credential)
   const connections = catalog?.connections ?? []
   const selectedScope = selected?.scope
   const workspace =
@@ -81,9 +84,11 @@ export function IntegrationDetails({
       )
     )
   }
-  async function open(credential: IntegrationCredential) {
-    await setView({})
-    void setView({ credential: credential.id }, { history: 'push', scroll: false })
+  function open(credential: IntegrationCredential) {
+    startOpening(async () => {
+      await setView({})
+      await setView({ credential: credential.id }, { history: 'push', scroll: false })
+    })
   }
   function save(credential: IntegrationCredential) {
     const current = integration.credentials.find((entry) => entry.id === credential.id)
@@ -271,7 +276,7 @@ export function IntegrationDetails({
           <CredentialList
             integrationName={integration.name}
             credentials={integration.credentials}
-            onOpen={(credential) => void open(credential)}
+            onOpen={open}
           />
           {catalog && (
             <IntegrationCapabilities

apps/sim/platform/app/(shell)/integrations/_components/integration-center/integration-center.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useTransition } from 'react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import styles from '@/platform/app/(shell)/integrations/_components/integration-center/integration-center.module.css'
@@ -62,6 +62,7 @@ export function IntegrationCenter({
   const router = useRouter()
   const search = useSearchParams()
   const [view, setView] = useQueryStates(centerParams, { history: 'replace', shallow: true })
+  const [isOpening, startOpening] = useTransition()
   const [creating, setCreating] = useState<IntegrationResource['kind'] | null>(null)
   const [deleting, setDeleting] = useState<IntegrationResource | null>(null)
   const tabs = library
@@ -115,15 +116,19 @@ export function IntegrationCenter({
     )
     .sort(compare)
     .map((app) => ({ ...app, href: serializeCenter(app.href, { ...view, resource: null }) }))
-  const editing = library?.data.resources.find((resource) => resource.id === view.resource)
+  const editing = isOpening
+    ? undefined
+    : library?.data.resources.find((resource) => resource.id === view.resource)
   const empty =
     current === 'apps'
       ? !visibleApps.length
       : !resources.length && !(current === 'credentials' && credentialLinks.length)
 
-  async function open(resource: IntegrationResource) {
-    await setView({})
-    void setView({ resource: resource.id }, { history: 'push', scroll: false })
+  function open(resource: IntegrationResource) {
+    startOpening(async () => {
+      await setView({})
+      await setView({ resource: resource.id }, { history: 'push', scroll: false })
+    })
   }
 
   async function navigate(href: string) {