diff --git a/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx b/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
index 82b41fd0c1..cf176d5183 100644
--- a/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
+++ b/web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
@@ -94,13 +94,12 @@ const SkillTemplatesSection = () => {
           <TemplateCard
             key={entry.id}
             template={entry}
+            disabled={loadingId !== null}
+            loading={loadingId === entry.id}
             onUse={handleUse}
           />
         ))}
       </div>
-      {loadingId
-        ? <div className="pointer-events-none fixed inset-0 z-50" />
-        : null}
     </section>
   )
 }
diff --git a/web/app/components/workflow/skill/start-tab/template-card.tsx b/web/app/components/workflow/skill/start-tab/template-card.tsx
index cbd25e881a..a15d8b9438 100644
--- a/web/app/components/workflow/skill/start-tab/template-card.tsx
+++ b/web/app/components/workflow/skill/start-tab/template-card.tsx
@@ -10,10 +10,12 @@ import Button from '@/app/components/base/button'
 
 type TemplateCardProps = {
   template: SkillTemplateSummary
+  disabled?: boolean
+  loading?: boolean
   onUse: (template: SkillTemplateSummary) => void
 }
 
-const TemplateCard = ({ template, onUse }: TemplateCardProps) => {
+const TemplateCard = ({ template, disabled, loading, onUse }: TemplateCardProps) => {
   const { t } = useTranslation('workflow')
 
   return (
@@ -53,6 +55,8 @@ const TemplateCard = ({ template, onUse }: TemplateCardProps) => {
             variant="primary"
             size="medium"
             className="w-full"
+            disabled={disabled}
+            loading={loading}
             onClick={() => onUse(template)}
           >
             <RiAddLine className="mr-0.5 h-4 w-4" />