fix: improve template loading feedback with better placement for title display

browser_tests/tests/templates.spec.ts

@@ -112,20 +112,19 @@ test.describe('Templates', () => {
     // Set locale to French before opening templates
     await comfyPage.setSetting('Comfy.Locale', 'fr')
 
-    // Capture request for the French index file
-    let frenchIndexRequested = false
-    await comfyPage.page.route('**/templates/index.fr.json', async (route) => {
-      frenchIndexRequested = true
-      // Return the actual French index file
-      await route.continue()
-    })
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
 
-    // Load the templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
+
+    const request = await requestPromise
 
     // Verify French index was requested
-    expect(frenchIndexRequested).toBe(true)
+    expect(request.url()).toContain('templates/index.fr.json')
+
+    await expect(comfyPage.templates.content).toBeVisible()
   })
 
   test('Falls back to English templates when locale file not found', async ({
@@ -170,14 +169,14 @@ test.describe('Templates', () => {
       comfyPage.templates.content.getByRole('heading', {
         name: 'Image Generation'
       })
-    ).toBeVisible({ timeout: 5000 })
+    ).toBeVisible()
 
     // Also verify English descriptions
     await expect(
       comfyPage.templates.content.getByText(
         'Generate images from text prompts.'
       )
-    ).toBeVisible({ timeout: 5000 })
+    ).toBeVisible()
   })
 
   test('template cards are dynamically sized and responsive', async ({

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -95,6 +95,14 @@
           </SingleSelect>
         </div>
       </div>
+      <div
+        v-if="!isLoading"
+        class="px-6 pt-4 pb-2 text-2xl font-semibold text-neutral"
+      >
+        <span>
+          {{ pageTitle }}
+        </span>
+      </div>
     </template>
 
     <template #content>
@@ -118,15 +126,10 @@
       </div>
       <div v-else>
         <!-- Title -->
-        <div class="px-6 pt-4 pb-2 text-2xl font-semibold text-neutral">
-          <span
-            v-if="isLoading"
-            class="inline-block h-8 w-48 bg-neutral-200 dark-theme:bg-neutral-700 rounded animate-pulse"
-          ></span>
-          <span v-else>
-            {{ pageTitle }}
-          </span>
-        </div>
+        <span
+          v-if="isLoading"
+          class="inline-block h-8 w-48 bg-neutral-200 dark-theme:bg-neutral-700 rounded animate-pulse"
+        ></span>
 
         <!-- Template Cards Grid -->
         <div