From c19d8b524bbeaf45409096cc22df203e79183faf Mon Sep 17 00:00:00 2001
From: guillaume <guillaume.belanger27@gmail.com>
Date: Mon, 16 Sep 2024 13:47:55 -0400
Subject: [PATCH] chore: use common components for loading and errors

Signed-off-by: guillaume <guillaume.belanger27@gmail.com>
---
 ui/src/app/certificate_requests/page.tsx | 30 ++---------------------
 ui/src/app/error.tsx                     | 11 +++++++++
 ui/src/app/loading.tsx                   | 10 ++++++++
 ui/src/app/users/page.tsx                | 31 ++----------------------
 4 files changed, 25 insertions(+), 57 deletions(-)
 create mode 100644 ui/src/app/error.tsx
 create mode 100644 ui/src/app/loading.tsx

diff --git a/ui/src/app/certificate_requests/page.tsx b/ui/src/app/certificate_requests/page.tsx
index 2f7d650..df46bd6 100644
--- a/ui/src/app/certificate_requests/page.tsx
+++ b/ui/src/app/certificate_requests/page.tsx
@@ -6,35 +6,9 @@ import { getCertificateRequests } from "../queries"
 import { CSREntry } from "../types"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
+import Loading from "../loading"
+import Error from "../error"
 
-function Error({ msg }: { msg: string }) {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="u-align--left">
-                        <p className="p-heading--5">An error occured trying to load certificate requests</p>
-                        <p>{msg}</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
-
-function Loading() {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="col-8 col-medium-4 col-small-3">
-                        <p className="p-heading--4 u-no-margin--bottom">Loading...</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
 
 export default function CertificateRequests() {
     const router = useRouter()
diff --git a/ui/src/app/error.tsx b/ui/src/app/error.tsx
new file mode 100644
index 0000000..498692d
--- /dev/null
+++ b/ui/src/app/error.tsx
@@ -0,0 +1,11 @@
+"use client"
+import { Strip } from "@canonical/react-components";
+
+export default function Error({ msg }: { msg: string }) {
+    return (
+        <Strip >
+            <p className="p-heading--5">An error occured trying to load content</p>
+            <p>{msg}</p>
+        </Strip>
+    )
+}
diff --git a/ui/src/app/loading.tsx b/ui/src/app/loading.tsx
new file mode 100644
index 0000000..010395e
--- /dev/null
+++ b/ui/src/app/loading.tsx
@@ -0,0 +1,10 @@
+"use client"
+import { Strip, Spinner } from "@canonical/react-components";
+
+export default function Loading() {
+    return (
+        <Strip >
+            <Spinner text="Loading..." />
+        </Strip>
+    )
+}
diff --git a/ui/src/app/users/page.tsx b/ui/src/app/users/page.tsx
index 531378f..2780cb0 100644
--- a/ui/src/app/users/page.tsx
+++ b/ui/src/app/users/page.tsx
@@ -6,35 +6,8 @@ import { UserEntry } from "../types"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 import { UsersTable } from "./table"
-
-function Error({ msg }: { msg: string }) {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="u-align--left">
-                        <p className="p-heading--5">An error occured trying to load users</p>
-                        <p>{msg}</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
-
-function Loading() {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="col-8 col-medium-4 col-small-3">
-                        <p className="p-heading--4 u-no-margin--bottom">Loading...</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
+import Loading from "../loading"
+import Error from "../error"
 
 export default function Users() {
     const router = useRouter()