From 31904f28ad41727c580b452653849c69b0ec02a1 Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Sat, 26 Aug 2023 17:26:40 +0200
Subject: [PATCH] =?UTF-8?q?web/elements:=20improve=20table=20error=20handl?=
 =?UTF-8?q?ing,=20prevent=20infinite=20loading=20=E2=80=A6=20(#6636)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

web/elements: improve table error handling, prevent infinite loading spinner

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/table/Table.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index f671e7b37..b9cf20b14 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -23,7 +23,7 @@ import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
 import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { Pagination } from "@goauthentik/api";
+import { Pagination, ResponseError } from "@goauthentik/api";
 
 export class TableColumn {
     title: string;
@@ -260,7 +260,9 @@ export abstract class Table<T> extends AKElement {
 
     renderError(): TemplateResult {
         return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
-            <div slot="body">${this.hasError?.toString()}</div>
+            ${this.hasError instanceof ResponseError
+                ? html` <div slot="body">${this.hasError.message}</div> `
+                : html`<div slot="body">${this.hasError?.toString()}</div>`}
         </ak-empty-state>`;
     }
 
@@ -268,8 +270,8 @@ export abstract class Table<T> extends AKElement {
         if (this.hasError) {
             return [this.renderEmpty(this.renderError())];
         }
-        if (!this.data) {
-            return;
+        if (!this.data || this.isLoading) {
+            return [this.renderLoading()];
         }
         if (this.data.pagination.count === 0) {
             return [this.renderEmpty()];
@@ -499,7 +501,7 @@ export abstract class Table<T> extends AKElement {
                         ${this.columns().map((col) => col.render(this))}
                     </tr>
                 </thead>
-                ${this.isLoading || !this.data ? this.renderLoading() : this.renderRows()}
+                ${this.renderRows()}
             </table>
             ${this.paginated
                 ? html` <div class="pf-c-pagination pf-m-bottom">