Improve loading-animation

src/components/aktivitetskrav/AktivitetskravInfo.tsx

@@ -1,60 +1,80 @@
-import React from "react"
-import { BodyLong, Heading } from "@navikt/ds-react"
-import { Chat2Icon, DocPencilIcon, PersonIcon } from "@navikt/aksel-icons"
+import React from "react";
+import { BodyLong, Heading } from "@navikt/ds-react";
+import { Chat2Icon, DocPencilIcon, PersonIcon } from "@navikt/aksel-icons";
 import {
-    hvaBetyrDetText,
-    hvaMaDuGjoreText,
-    hvordanVurdererText,
-} from "./InfoTexts"
+  hvaBetyrDetText,
+  hvaMaDuGjoreText,
+  hvordanVurdererText,
+} from "./InfoTexts";
 import { IconRow } from "@/components/icons/IconRow";
+import { Skeletor } from "@/components/skeleton/Skeletor";
 
 interface Props {
-    harArbeidsgiver: boolean
+  harArbeidsgiver: boolean;
+  displaySkeleton?: boolean;
 }
 
-export const AktivitetskravInfo = ({ harArbeidsgiver }: Props) => {
-    return (
-        <div className="flex flex-col gap-8">
-            <div className="mb-4">
-                <BodyLong spacing>Hei!</BodyLong>
-
-                <BodyLong>
-                    Det er på tide å informere deg om aktivitetsplikten. Alle
-                    sykmeldte skal i utgangspunktet jobbe litt hvis de kan, også
-                    hvis de er 100 % sykmeldt. Dette kalles aktivitetsplikt i
-                    folketrygdloven.
-                </BodyLong>
-            </div>
-
-            <IconRow icon={<DocPencilIcon />}>
-                <div>
-                    <Heading size="medium" level="3" spacing>
-                        Hvordan vurderer NAV aktivitetsplikten?
-                    </Heading>
-
-                    <BodyLong>{hvordanVurdererText(harArbeidsgiver)}</BodyLong>
-                </div>
-            </IconRow>
-
-            <IconRow icon={<PersonIcon />}>
-                <div>
-                    <Heading size="medium" level="3" spacing>
-                        Hva betyr det for deg?
-                    </Heading>
-
-                    <BodyLong>{hvaBetyrDetText(harArbeidsgiver)}</BodyLong>
-                </div>
-            </IconRow>
-
-            <IconRow icon={<Chat2Icon />}>
-                <div>
-                    <Heading size="medium" level="3" spacing>
-                        Hva må du gjøre?
-                    </Heading>
-
-                    <BodyLong>{hvaMaDuGjoreText(harArbeidsgiver)}</BodyLong>
-                </div>
-            </IconRow>
+export const AktivitetskravInfo = ({
+  harArbeidsgiver,
+  displaySkeleton = false,
+}: Props) => {
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-4">
+        <Skeletor displaySkeleton={displaySkeleton}>
+          <BodyLong spacing>Hei!</BodyLong>
+        </Skeletor>
+
+        <Skeletor displaySkeleton={displaySkeleton}>
+          <BodyLong>
+            Det er på tide å informere deg om aktivitetsplikten. Alle sykmeldte
+            skal i utgangspunktet jobbe litt hvis de kan, også hvis de er 100 %
+            sykmeldt. Dette kalles aktivitetsplikt i folketrygdloven.
+          </BodyLong>
+        </Skeletor>
+      </div>
+
+      <IconRow icon={<DocPencilIcon />} displaySkeleton={displaySkeleton}>
+        <div>
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <Heading size="medium" level="3" spacing>
+              Hvordan vurderer NAV aktivitetsplikten?
+            </Heading>
+          </Skeletor>
+
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <BodyLong>{hvordanVurdererText(harArbeidsgiver)}</BodyLong>
+          </Skeletor>
         </div>
-    )
-}
+      </IconRow>
+
+      <IconRow icon={<PersonIcon />} displaySkeleton={displaySkeleton}>
+        <div>
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <Heading size="medium" level="3" spacing>
+              Hva betyr det for deg?
+            </Heading>
+          </Skeletor>
+
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <BodyLong>{hvaBetyrDetText(harArbeidsgiver)}</BodyLong>
+          </Skeletor>
+        </div>
+      </IconRow>
+
+      <IconRow icon={<Chat2Icon />} displaySkeleton={displaySkeleton}>
+        <div>
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <Heading size="medium" level="3" spacing>
+              Hva må du gjøre?
+            </Heading>
+          </Skeletor>
+
+          <Skeletor displaySkeleton={displaySkeleton}>
+            <BodyLong>{hvaMaDuGjoreText(harArbeidsgiver)}</BodyLong>
+          </Skeletor>
+        </div>
+      </IconRow>
+    </div>
+  );
+};

src/components/icons/IconRow.tsx

@@ -1,15 +1,23 @@
-import CircledIcon from "./CircledIcon"
-import React, { ReactElement } from "react"
+import CircledIcon from "./CircledIcon";
+import React, { ReactElement } from "react";
+import { Skeleton } from "@navikt/ds-react";
 
 interface Props {
-    icon: ReactElement
-    children: ReactElement
+  icon: ReactElement;
+  children: ReactElement;
+  displaySkeleton?: boolean;
 }
-export const IconRow = ({ icon, children }: Props) => {
-    return (
-        <div className="flex flex-row gap-4">
-            <CircledIcon className="hidden sm:flex" icon={icon} />
-            {children}
+export const IconRow = ({ icon, displaySkeleton = false, children }: Props) => {
+  return (
+    <div className="flex flex-row gap-4">
+      {displaySkeleton ? (
+        <div>
+          <Skeleton variant="circle" width={60} height={60} />
         </div>
-    )
-}
+      ) : (
+        <CircledIcon className="hidden sm:flex" icon={icon} />
+      )}
+      {children}
+    </div>
+  );
+};

src/components/page/Page.tsx

@@ -4,7 +4,7 @@ import { PageHeading } from "./PageHeading"
 import { MedUtenAGVisning } from "@/components/AktivitetskravInfoComponent";
 
 interface Props {
-    headerText: string
+    headerText: ReactNode
     image?: MedUtenAGVisning
     children: ReactNode
 }

src/components/page/PageHeading.tsx

@@ -1,8 +1,8 @@
 import { Heading } from "@navikt/ds-react"
-import React from "react"
+import React, { ReactNode } from "react";
 
 interface Props {
-    headerText: string
+    headerText: ReactNode
 }
 
 export const PageHeading = ({ headerText }: Props) => {

src/components/page/PageHeadingWithImage.tsx

@@ -1,12 +1,12 @@
 import Image from "next/image";
 import { Heading } from "@navikt/ds-react";
-import React from "react";
+import React, { ReactNode } from "react";
 import medarbeidsgiver from "../../../public/med_arbeidsgiver.svg";
 import utenarbeidsgiver from "../../../public/uten_arbeidsgiver.svg";
 import { MedUtenAGVisning } from "@/components/AktivitetskravInfoComponent";
 
 interface Props {
-  headerText: string;
+  headerText: ReactNode;
   image: MedUtenAGVisning;
 }
 

src/components/skeleton/AktivitetskravSkeletonComponent.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { Page } from "@/components/page/Page";
+import { AktivitetskravInfo } from "@/components/aktivitetskrav/AktivitetskravInfo";
+import { Link, Skeleton } from "@navikt/ds-react";
+
+export const AktivitetskravSkeletonComponent = () => {
+  return (
+    <Page headerText={<Skeleton>Informasjon om aktivitetsplikt</Skeleton>}>
+      <AktivitetskravInfo harArbeidsgiver={true} displaySkeleton={true} />
+
+      <Link
+        className="flex self-center"
+        href={process.env.NEXT_PUBLIC_MIN_SIDE_URL}
+      >
+        Naviger til Min side
+      </Link>
+    </Page>
+  );
+};

src/components/skeleton/Skeletor.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@navikt/ds-react";
+import { SkeletonProps } from "@navikt/ds-react/src/skeleton/Skeleton";
+
+interface Props extends SkeletonProps {
+  displaySkeleton: boolean;
+}
+
+export const Skeletor = ({ displaySkeleton, children }: Props) => {
+  if (displaySkeleton) {
+    return <Skeleton>{children}</Skeleton>;
+  }
+  return children;
+};

src/data/api.ts

@@ -1,13 +1,13 @@
 import { loginUser } from "@/utils/urlUtils";
 
-export const get = async (path: string) => {
+export const get = async <ResponseData>(path: string): Promise<ResponseData> => {
   const response = await fetch(path, {
     method: "GET",
     credentials: "include",
   });
 
   if (response.status === 401) {
-    return loginUser();
+    loginUser();
   }
 
   if (!response.ok) {

src/pages/api/aktivitetsplikt/index.ts

@@ -7,7 +7,7 @@ export default function handler(
   res: NextApiResponse<AktivitetskravVurdering | null>,
 ) {
   if (process.env.NEXT_PUBLIC_RUNTIME_ENVIRONMENT === "local") {
-    res.status(200).json(fixtures.forhaandsvarselVurdering);
+    res.status(200).json(fixtures.nyKandidatVurdering);
   } else {
     res.status(404).json(null);
   }

src/pages/index.tsx

@@ -3,21 +3,29 @@ import { Aktivitetskrav } from "@/components/Aktivitetskrav";
 import { useQuery } from "@tanstack/react-query";
 import { NextPage } from "next";
 import { get } from "@/data/api";
+import { AktivitetskravVurdering } from "@/schema/aktivitetskravVurderingSchema";
+import { AktivitetskravSkeletonComponent } from "@/components/skeleton/AktivitetskravSkeletonComponent";
 
 const Home: NextPage = () => {
   const { isPending, error, data } = useQuery({
     queryKey: ["aktivitetskrav"],
-    queryFn: () => get(process.env.NEXT_PUBLIC_ESYFO_PROXY_API_URL!),
-    throwOnError: true,
+    queryFn: () =>
+      get<AktivitetskravVurdering>(
+        process.env.NEXT_PUBLIC_ESYFO_PROXY_API_URL!,
+      ),
   });
 
-  if (isPending) {
-    return "...loading todo (skeleton?)";
+  if (error) {
+    throw error;
   }
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between md:p-8">
-      <Aktivitetskrav aktivitetskrav={data!} />
+      {isPending ? (
+        <AktivitetskravSkeletonComponent />
+      ) : (
+        <Aktivitetskrav aktivitetskrav={data} />
+      )}
     </main>
   );
 };