Merge pull request #1103 from danskernesdigitalebibliotek/feature/DDF…

…LSBP-486-user-me-skeletons-serverside-clientside

Adding skeleton view for Patron page [DDFLSBP-486]

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) => {

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;

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;