Fix: fix jittering when toggling workflows

diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.html b/src-ui/src/app/components/manage/workflows/workflows.component.html
index 085de71ea62eeacaf6d57d8b1049f412def8130c..0fb63d09a36f382be8ffb3b39f1323fa358c5bc7 100644 (file)
--- a/src-ui/src/app/components/manage/workflows/workflows.component.html
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.html
@@ -22,7 +22,7 @@
     </div>
   </li>
 
-  @if (loading) {
+  @if (loading && workflows.length === 0) {
     <li class="list-group-item">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
@@ -36,7 +36,7 @@
         <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
         <div class="col d-flex align-items-center">
           <div class="form-check form-switch mb-0">
-            <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="workflow.id+'_enable'" [(ngModel)]="workflow.enabled" (change)="onWorkflowEnableToggled(workflow)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }">
+            <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="workflow.id+'_enable'" [(ngModel)]="workflow.enabled" (change)="toggleWorkflowEnabled(workflow)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }">
             <label class="form-check-label cursor-pointer" [for]="workflow.id+'_enable'">
               <code> @if(workflow.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code>
             </label>

diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.ts b/src-ui/src/app/components/manage/workflows/workflows.component.ts
index 8d6e0f00860cf8f8dd259e5c72dc7e7720437a7a..9c1bc1ad4aac1010e91a84db24da488a84caca43 100644 (file)
--- a/src-ui/src/app/components/manage/workflows/workflows.component.ts
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.ts
@@ -147,7 +147,7 @@ export class WorkflowsComponent
     })
   }
 
-  onWorkflowEnableToggled(workflow: Workflow) {
+  toggleWorkflowEnabled(workflow: Workflow) {
     this.workflowService.patch(workflow).subscribe({
       next: () => {
         this.toastService.showInfo(