web: Defer table refresh, visibility checks. (cherry-pick #19194 to version-2025.12)

web/src/admin/endpoints/connectors/ConnectorsListPage.ts

@@ -44,23 +44,25 @@ export class ConnectorsListPage extends TablePage<Connector> {
         return [
             html`<a href="#/endpoints/connectors/${item.connectorUuid}">${item.name}</a>`,
             html`${item.verboseName}`,
-            html`<ak-forms-modal>
-                <span slot="submit">${msg("Update")}</span>
-                <span slot="header">${msg("Update Connector")}</span>
-                <ak-proxy-form
-                    slot="form"
-                    .args=${{
-                        instancePk: item.connectorUuid,
-                    }}
-                    type=${ifDefined(item.component)}
-                >
-                </ak-proxy-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>`,
+            html`<div>
+                <ak-forms-modal>
+                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="header">${msg("Update Connector")}</span>
+                    <ak-proxy-form
+                        slot="form"
+                        .args=${{
+                            instancePk: item.connectorUuid,
+                        }}
+                        type=${ifDefined(item.component)}
+                    >
+                    </ak-proxy-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit" aria-hidden="true"></i>
+                        </pf-tooltip>
+                    </button>
+                </ak-forms-modal>
+            </div>`,
         ];
     }
 

web/src/admin/flows/FlowListPage.ts

@@ -85,7 +85,8 @@ export class FlowListPage extends TablePage<Flow> {
             html`${item.name}`,
             html`${Array.from(item.stages || []).length}`,
             html`${Array.from(item.policies || []).length}`,
-            html` <ak-forms-modal>
+            html`<div>
+                <ak-forms-modal>
                     <span slot="submit">${msg("Update")}</span>
                     <span slot="header">${msg("Update Flow")}</span>
                     <ak-flow-form slot="form" .instancePk=${item.slug}> </ak-flow-form>
@@ -121,7 +122,8 @@ export class FlowListPage extends TablePage<Flow> {
                     <pf-tooltip position="top" content=${msg("Export")}>
                         <i class="fas fa-download" aria-hidden="true"></i>
                     </pf-tooltip>
-                </a>`,
+                </a>
+            </div>`,
         ];
     }
 

web/src/elements/ak-progress-bar.ts

@@ -1,11 +1,11 @@
 import { PFSize } from "#common/enums";
 
 import { AKElement } from "#elements/Base";
-
-import { spread } from "@open-wc/lit-helpers";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import PFProgress from "@patternfly/patternfly/components/Progress/progress.css";
 
@@ -21,19 +21,35 @@ export class ProgressBar extends AKElement {
             .pf-c-progress {
                 overflow: hidden;
             }
+
             .pf-c-progress.pf-m-indeterminate {
                 --pf-c-progress__bar--Height: 2px;
                 --pf-c-progress--GridGap: 0;
                 margin-bottom: calc(var(--pf-c-progress__bar--Height) * -1);
                 z-index: 1;
                 position: relative;
             }
-            .pf-c-progress.pf-m-indeterminate .pf-c-progress__bar .pf-c-progress__indicator {
-                width: 100%;
-                height: 100%;
-                animation: indeterminateAnimation 1s infinite linear;
-                transform-origin: 0% 50%;
+
+            .pf-c-progress.pf-m-indeterminate {
+                transition: opacity 0.2s linear;
+                transition-delay: 0.2s;
+
+                .pf-c-progress__bar .pf-c-progress__indicator {
+                    width: 100%;
+                    height: 100%;
+                    animation: indeterminateAnimation 1s infinite linear;
+                    transform-origin: 0% 50%;
+                }
             }
+
+            :host([inert]) .pf-c-progress.pf-m-indeterminate {
+                opacity: 0;
+
+                .pf-c-progress__bar .pf-c-progress__indicator {
+                    animation-iteration-count: 1;
+                }
+            }
+
             @keyframes indeterminateAnimation {
                 0% {
                     transform: translateX(0) scaleX(0);
@@ -48,32 +64,29 @@ export class ProgressBar extends AKElement {
         `,
     ];
 
-    @property({ type: Number })
-    min = 0;
-    @property({ type: Number })
-    max = 100;
-    @property({ type: Number })
-    value = 0;
-
-    @property({ type: Boolean })
-    indeterminate = false;
-
-    @property()
-    size: PFSize = PFSize.Medium;
-
-    render() {
-        const barAttrs: { [key: string]: unknown } = {};
-        const indicatorAttrs: { [key: string]: unknown } = {};
-        if (!this.indeterminate) {
-            barAttrs["aria-valuemin"] = this.min;
-            barAttrs["aria-valuemax"] = this.max;
-            barAttrs["aria-valuenow"] = this.value;
-            indicatorAttrs.style = `"width:${Math.min(this.value, 100)}%;";`;
-        }
+    @property({ type: Number, reflect: true, useDefault: true })
+    public min = 0;
+
+    @property({ type: Number, reflect: true, useDefault: true })
+    public max = 100;
+
+    @property({ type: Number, reflect: true, useDefault: true })
+    public value = 0;
+
+    @property({ type: Boolean, reflect: true, useDefault: true })
+    public indeterminate = false;
+
+    @property({ type: String, reflect: true, useDefault: true })
+    public size: PFSize = PFSize.Medium;
+
+    @property({ type: String })
+    public label = "";
+
+    protected render() {
         return html`<div
             class="pf-c-progress ${this.classList} ${this.indeterminate
                 ? "pf-m-indeterminate"
-                : ""} ${this.size.toString()}"
+                : ""} ${this.size}"
         >
             ${this.hasSlotted("description")
                 ? html`
@@ -91,8 +104,21 @@ export class ProgressBar extends AKElement {
                       </div>
                   `
                 : nothing}
-            <div class="pf-c-progress__bar" role="progressbar" ${spread(barAttrs)}>
-                <div class="pf-c-progress__indicator" ${spread(indicatorAttrs)}></div>
+            <div
+                class="pf-c-progress__bar ak-fade-in"
+                role="progressbar"
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${ifPresent(this.indeterminate, this.value)}
+                aria-label=${ifPresent(this.label)}
+                aria-describedby=${this.hasSlotted("description") ? "description" : nothing}
+            >
+                <div
+                    class="pf-c-progress__indicator"
+                    style=${styleMap({
+                        width: this.indeterminate ? "100%" : `${Math.min(this.value, 100)}%`,
+                    })}
+                ></div>
             </div>
         </div> `;
     }

web/src/elements/forms/DeleteBulkForm.ts

@@ -12,7 +12,7 @@ import { SlottedTemplateResult } from "#elements/types";
 import { UsedBy, UsedByActionEnum } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
+import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
@@ -79,9 +79,9 @@ export class DeleteObjectsTable<T extends object> extends Table<T> {
         return nothing;
     }
 
-    firstUpdated(): void {
+    firstUpdated(changedProperties: PropertyValues<this>): void {
         this.expandable = this.usedBy !== undefined;
-        super.firstUpdated();
+        super.firstUpdated(changedProperties);
     }
 
     renderExpanded(item: T): TemplateResult {

web/src/elements/table/Table.css

@@ -146,6 +146,7 @@ time {
 }
 
 :host {
+    display: block;
     container-type: inline-size;
 }