chore: use common components for loading and errors

Signed-off-by: guillaume <[email protected]>
canonical · Sep 16, 2024 · c19d8b5 · c19d8b5
1 parent 76fbd24
commit c19d8b5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()