From 69bd7ee6f0b420273f700554f26f372464a6ec82 Mon Sep 17 00:00:00 2001
From: clausbruun <claus@b-ruu.dk>
Date: Wed, 10 Apr 2024 13:26:30 +0200
Subject: [PATCH] Adding skeleton view for Patron page

---
 src/apps/patron-page/PatronPage.tsx           |  7 ++++-
 src/apps/patron-page/PatronPageSkeleton.tsx   | 26 +++++++++++++++++++
 .../sections/BasicDetailsSectionSkeleton.tsx  | 22 ++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/apps/patron-page/PatronPageSkeleton.tsx
 create mode 100644 src/apps/patron-page/sections/BasicDetailsSectionSkeleton.tsx

diff --git a/src/apps/patron-page/PatronPage.tsx b/src/apps/patron-page/PatronPage.tsx
index a4d7b63aaf..79959021e8 100644
--- a/src/apps/patron-page/PatronPage.tsx
+++ b/src/apps/patron-page/PatronPage.tsx
@@ -16,6 +16,7 @@ import StatusSection from "./sections/StatusSection";
 import { useUrls } from "../../core/utils/url";
 import { useNotificationMessage } from "../../core/utils/useNotificationMessage";
 import { usePatronData } from "../../core/utils/helpers/usePatronData";
+import PatronPageSkeleton from "./PatronPageSkeleton";
 
 const PatronPage: FC = () => {
   const queryClient = useQueryClient();
@@ -25,7 +26,7 @@ const PatronPage: FC = () => {
 
   const { mutate } = useUpdateV5();
 
-  const { data: patronData } = usePatronData();
+  const { data: patronData, isLoading } = usePatronData();
 
   const [patron, setPatron] = useState<PatronV5 | null>(null);
   const [pin, setPin] = useState<string | null>(null);
@@ -42,6 +43,10 @@ const PatronPage: FC = () => {
     }
   }, [patronData]);
 
+  if (isLoading || !patron) {
+    return <PatronPageSkeleton />;
+  }
+
   // Changes the patron object by key.
   // So using the paramters 123 and "phoneNumber" would change the phoneNumber to 123.
   const changePatron = (newValue: string | boolean, key: string) => {
diff --git a/src/apps/patron-page/PatronPageSkeleton.tsx b/src/apps/patron-page/PatronPageSkeleton.tsx
new file mode 100644
index 0000000000..45a980d0f5
--- /dev/null
+++ b/src/apps/patron-page/PatronPageSkeleton.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import BasicDetailsSectionSkeleton from "./sections/BasicDetailsSectionSkeleton";
+import ContactInfoSection from "../../components/contact-info-section/ContactInfoSection";
+import { useText } from "../../core/utils/text";
+
+const PatronPageSkeleton: React.FC = () => {
+  const t = useText();
+
+  return (
+    <form className="dpl-patron-page">
+      <h1 className="text-header-h1 my-32">{t("patronPageHeaderText")}</h1>
+      <h2 className="text-header-h4 mt-32 mb-16">
+        {t("patronPageBasicDetailsHeaderText")}
+      </h2>
+      <BasicDetailsSectionSkeleton />
+      <ContactInfoSection
+        changePatron={() => {}}
+        patron={null}
+        inLine={false}
+        showCheckboxes
+      />
+    </form>
+  );
+};
+
+export default PatronPageSkeleton;
diff --git a/src/apps/patron-page/sections/BasicDetailsSectionSkeleton.tsx b/src/apps/patron-page/sections/BasicDetailsSectionSkeleton.tsx
new file mode 100644
index 0000000000..a12554a773
--- /dev/null
+++ b/src/apps/patron-page/sections/BasicDetailsSectionSkeleton.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const BasicDetailsSectionSkeleton = () => {
+  return (
+    <div className="dpl-patron-info ssc">
+      <div className="dpl-patron-info__label">
+        <div className="ssc-head-line w-10" />
+      </div>
+      <div className="dpl-patron-info__text">
+        <div className="ssc-head-line w-20 mts" />
+      </div>
+      <div className="dpl-patron-info__label">
+        <div className="ssc-head-line w-10" />
+      </div>
+      <div className="dpl-patron-info__text">
+        <div className="ssc-head-line w-40 mts" />
+      </div>
+    </div>
+  );
+};
+
+export default BasicDetailsSectionSkeleton;