fix: improve template URL loading UX and prevent re-triggering (#6593)

Fixes the janky UX when loading templates via URL query parameters by
moving the loading logic earlier in the app lifecycle (from
GraphView.onGraphReady to
useWorkflowPersistence.restorePreviousWorkflow). The saved workflow now
loads first as a background tab, then the template loads as the active
tab, eliminating the visual flash where the saved workflow briefly
appears before being replaced. After loading, the template and source
query parameters are removed from the URL using router.replace to
prevent the template from re-loading on page refresh. This preserves
user work by keeping both workflows open in separate tabs and matches
the existing behavior when clicking templates from the dialog. All 15
tests pass including 3 new tests for URL cleanup.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6593-fix-improve-template-URL-loading-UX-and-prevent-re-triggering-2a26d73d36508137a0cae6cf92c842fc)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Christian Byrne <c.byrne@comfy.org>
This commit is contained in:
Christian Byrne
2025-11-11 12:51:56 -08:00
committed by GitHub
parent 6541f5cda5
commit 3c550e953a
5 changed files with 79 additions and 15 deletions

View File

@@ -14,10 +14,14 @@ import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/
// Mock vue-router
let mockQueryParams: Record<string, string | undefined> = {}
const mockRouterReplace = vi.fn()
vi.mock('vue-router', () => ({
useRoute: vi.fn(() => ({
query: mockQueryParams
})),
useRouter: vi.fn(() => ({
replace: mockRouterReplace
}))
}))
@@ -217,4 +221,43 @@ describe('useTemplateUrlLoader', () => {
life: 3000
})
})
it('removes template params from URL after successful load', async () => {
mockQueryParams = {
template: 'flux_simple',
source: 'custom',
other: 'param'
}
const { loadTemplateFromUrl } = useTemplateUrlLoader()
await loadTemplateFromUrl()
expect(mockRouterReplace).toHaveBeenCalledWith({
query: { other: 'param' }
})
})
it('removes template params from URL even on error', async () => {
mockQueryParams = { template: 'invalid', source: 'custom', other: 'param' }
mockLoadWorkflowTemplate.mockResolvedValueOnce(false)
const { loadTemplateFromUrl } = useTemplateUrlLoader()
await loadTemplateFromUrl()
expect(mockRouterReplace).toHaveBeenCalledWith({
query: { other: 'param' }
})
})
it('removes template params from URL even on exception', async () => {
mockQueryParams = { template: 'flux_simple', other: 'param' }
mockLoadTemplates.mockRejectedValueOnce(new Error('Network error'))
const { loadTemplateFromUrl } = useTemplateUrlLoader()
await loadTemplateFromUrl()
expect(mockRouterReplace).toHaveBeenCalledWith({
query: { other: 'param' }
})
})
})