Refactor. Use skeleton loaders. Clean up styling.

frontend/src/components/behandling/behandling.tsx

@@ -1,4 +1,6 @@
+import { Heading, Skeleton } from '@navikt/ds-react';
 import React from 'react';
+import { BehandlingSection } from '@app/components/behandling/behandlingsdetaljer/behandling-section';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useBehandlingEnabled } from '@app/hooks/settings/use-setting';
 import { SaksTypeEnum } from '@app/types/kodeverk';
@@ -7,7 +9,7 @@ import { Ankebehandlingsdetaljer } from './behandlingsdetaljer/ankebehandlingsde
 import { Klagebehandlingsdetaljer } from './behandlingsdetaljer/klagebehandlingsdetaljer';
 import { Trygderettsankebehandlingsdetaljer } from './behandlingsdetaljer/trygderettsankebehandlingsdetaljer';
 import { Behandlingsdialog } from './behandlingsdialog/behandlingsdialog';
-import { StyledContainer } from './styled-components';
+import { StyledBehandlingSection, StyledContainer } from './styled-components';
 
 export const Behandling = () => {
   const { value: shown = true, isLoading } = useBehandlingEnabled();
@@ -30,16 +32,49 @@ const Behandlingsdetaljer = () => {
   const { data: oppgave } = useOppgave();
 
   if (typeof oppgave === 'undefined') {
-    return null;
+    return (
+      <StyledBehandlingSection>
+        <Heading level="1" size="medium" spacing>
+          Behandling
+        </Heading>
+
+        <BehandlingSection label="Klager">
+          <Skeleton variant="text" height={34} />
+          <Skeleton variant="rounded" height={20} width={100} />
+        </BehandlingSection>
+
+        <BehandlingSection label="Fullmektig">
+          <Skeleton variant="text" height={34} />
+          <Skeleton variant="rounded" height={20} width={100} />
+        </BehandlingSection>
+
+        <BehandlingSection label="Type">
+          <Skeleton variant="rounded" height={28} width={55} />
+        </BehandlingSection>
+
+        <BehandlingSection label="Ytelse">
+          <Skeleton variant="rounded" height={28} width={150} />
+        </BehandlingSection>
+
+        <BehandlingSection label="Utfall/resultat">
+          <Skeleton variant="rounded" height={32} />
+        </BehandlingSection>
+
+        <BehandlingSection label="Utfallet er basert på lovhjemmel">
+          <Skeleton variant="rounded" height={32} />
+          <Skeleton variant="text" height={70} />
+        </BehandlingSection>
+      </StyledBehandlingSection>
+    );
   }
 
   if (oppgave.typeId === SaksTypeEnum.KLAGE) {
-    return <Klagebehandlingsdetaljer />;
+    return <Klagebehandlingsdetaljer oppgavebehandling={oppgave} />;
   }
 
   if (oppgave.typeId === SaksTypeEnum.ANKE) {
-    return <Ankebehandlingsdetaljer />;
+    return <Ankebehandlingsdetaljer oppgavebehandling={oppgave} />;
   }
 
-  return <Trygderettsankebehandlingsdetaljer />;
+  return <Trygderettsankebehandlingsdetaljer oppgavebehandling={oppgave} />;
 };

frontend/src/components/behandling/behandlingsdetaljer/ankebehandlingsdetaljer.tsx

@@ -1,7 +1,7 @@
-import { Heading, Loader } from '@navikt/ds-react';
+import { Heading } from '@navikt/ds-react';
 import React from 'react';
-import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useUpdateFullmektigMutation, useUpdateKlagerMutation } from '@app/redux-api/oppgaver/mutations/behandling';
+import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling';
 import { Part } from '../../part/part';
 import { Type } from '../../type/type';
 import { StyledBehandlingSection } from '../styled-components';
@@ -11,15 +11,14 @@ import { Lovhjemmel } from './lovhjemmel/lovhjemmel';
 import { UtfallResultat } from './utfall-resultat';
 import { Ytelse } from './ytelse';
 
-export const Ankebehandlingsdetaljer = () => {
-  const { data: oppgavebehandling, isLoading } = useOppgave();
+interface Props {
+  oppgavebehandling: IOppgavebehandling;
+}
+
+export const Ankebehandlingsdetaljer = ({ oppgavebehandling }: Props) => {
   const [updateFullmektig, { isLoading: fullmektigIsLoading }] = useUpdateFullmektigMutation();
   const [updateKlager, { isLoading: klagerIsLoading }] = useUpdateKlagerMutation();
 
-  if (typeof oppgavebehandling === 'undefined' || isLoading) {
-    return <Loader />;
-  }
-
   const { typeId, fraNAVEnhetNavn, fraNAVEnhet, resultat, ytelseId, prosessfullmektig } = oppgavebehandling;
 
   return (
@@ -48,7 +47,9 @@ export const Ankebehandlingsdetaljer = () => {
         <Type type={typeId}></Type>
       </BehandlingSection>
 
-      <Ytelse ytelseId={ytelseId} />
+      <BehandlingSection label="Ytelse">
+        <Ytelse ytelseId={ytelseId} />
+      </BehandlingSection>
 
       <BehandlingSection label="Behandlet av">
         {fraNAVEnhetNavn} &mdash; {fraNAVEnhet}

frontend/src/components/behandling/behandlingsdetaljer/klagebehandlingsdetaljer.tsx

@@ -1,9 +1,9 @@
-import { Heading, Loader } from '@navikt/ds-react';
+import { Heading } from '@navikt/ds-react';
 import React from 'react';
 import { Type } from '@app/components/type/type';
 import { isoDateToPretty } from '@app/domain/date';
-import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useUpdateFullmektigMutation, useUpdateKlagerMutation } from '@app/redux-api/oppgaver/mutations/behandling';
+import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling';
 import { Part } from '../../part/part';
 import { StyledBehandlingSection } from '../styled-components';
 import { BehandlingSection } from './behandling-section';
@@ -13,15 +13,14 @@ import { MottattVedtaksinstans } from './mottatt-vedtaksinstans';
 import { UtfallResultat } from './utfall-resultat';
 import { Ytelse } from './ytelse';
 
-export const Klagebehandlingsdetaljer = () => {
-  const { data: oppgavebehandling, isLoading } = useOppgave();
+interface Props {
+  oppgavebehandling: IOppgavebehandling;
+}
+
+export const Klagebehandlingsdetaljer = ({ oppgavebehandling }: Props) => {
   const [updateFullmektig, { isLoading: fullmektigIsLoading }] = useUpdateFullmektigMutation();
   const [updateKlager, { isLoading: klagerIsLoading }] = useUpdateKlagerMutation();
 
-  if (typeof oppgavebehandling === 'undefined' || isLoading) {
-    return <Loader size="xlarge" />;
-  }
-
   const {
     typeId,
     fraNAVEnhetNavn,
@@ -59,7 +58,9 @@ export const Klagebehandlingsdetaljer = () => {
         <Type type={typeId}></Type>
       </BehandlingSection>
 
-      <Ytelse ytelseId={ytelseId} />
+      <BehandlingSection label="Ytelse">
+        <Ytelse ytelseId={ytelseId} />
+      </BehandlingSection>
 
       <MottattVedtaksinstans />
 

frontend/src/components/behandling/behandlingsdetaljer/trygderettsankebehandlingsdetaljer.tsx

@@ -1,7 +1,7 @@
-import { Heading, Loader } from '@navikt/ds-react';
+import { Heading } from '@navikt/ds-react';
 import React from 'react';
-import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useUpdateFullmektigMutation } from '@app/redux-api/oppgaver/mutations/behandling';
+import { IOppgavebehandling } from '@app/types/oppgavebehandling/oppgavebehandling';
 import { Part } from '../../part/part';
 import { Type } from '../../type/type';
 import { StyledBehandlingSection } from '../styled-components';
@@ -12,13 +12,12 @@ import { SendtTilTrygderetten } from './sendt-til-trygderetten';
 import { UtfallResultat } from './utfall-resultat';
 import { Ytelse } from './ytelse';
 
-export const Trygderettsankebehandlingsdetaljer = () => {
-  const { data: oppgavebehandling, isLoading } = useOppgave();
-  const [updateFullmektig, { isLoading: fullmektigIsLoading }] = useUpdateFullmektigMutation();
+interface Props {
+  oppgavebehandling: IOppgavebehandling;
+}
 
-  if (typeof oppgavebehandling === 'undefined' || isLoading) {
-    return <Loader />;
-  }
+export const Trygderettsankebehandlingsdetaljer = ({ oppgavebehandling }: Props) => {
+  const [updateFullmektig, { isLoading: fullmektigIsLoading }] = useUpdateFullmektigMutation();
 
   const { typeId, resultat, ytelseId, prosessfullmektig } = oppgavebehandling;
 
@@ -42,7 +41,9 @@ export const Trygderettsankebehandlingsdetaljer = () => {
         <Type type={typeId}></Type>
       </BehandlingSection>
 
-      <Ytelse ytelseId={ytelseId} />
+      <BehandlingSection label="Ytelse">
+        <Ytelse ytelseId={ytelseId} />
+      </BehandlingSection>
 
       <SendtTilTrygderetten />
 

frontend/src/components/behandling/behandlingsdetaljer/ytelse.tsx

@@ -1,7 +1,7 @@
+import { Skeleton } from '@navikt/ds-react';
 import React from 'react';
 import { useFullYtelseNameFromId } from '@app/hooks/use-kodeverk-ids';
 import { LabelTema } from '@app/styled-components/labels';
-import { BehandlingSection } from './behandling-section';
 
 interface Props {
   ytelseId: string;
@@ -10,9 +10,9 @@ interface Props {
 export const Ytelse = ({ ytelseId }: Props) => {
   const ytelse = useFullYtelseNameFromId(ytelseId);
 
-  return (
-    <BehandlingSection label="Ytelse">
-      <LabelTema>{ytelse}</LabelTema>
-    </BehandlingSection>
-  );
+  if (ytelse === undefined) {
+    return <Skeleton variant="rounded" height={28} width={150} />;
+  }
+
+  return <LabelTema>{ytelse}</LabelTema>;
 };

frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx

@@ -1,5 +1,5 @@
-import { Loader } from '@navikt/ds-react';
 import React from 'react';
+import { SKELETON } from '@app/components/behandling/behandlingsdialog/medunderskriver/skeleton';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id';
 import { useHasRole } from '@app/hooks/use-has-role';
@@ -32,6 +32,7 @@ export const Medunderskriver = () => {
   useGetMedunderskriverflytQuery(oppgaveId, isAssignee ? undefined : options);
 
   if (oppgave === undefined) {
+    return SKELETON;
   }
 
   if (oppgave.strengtFortrolig === true) {

frontend/src/components/behandling/behandlingsdialog/medunderskriver/select-medunderskriver.tsx

@@ -1,5 +1,6 @@
 import { Select } from '@navikt/ds-react';
 import React, { useMemo } from 'react';
+import { SKELETON } from '@app/components/behandling/behandlingsdialog/medunderskriver/skeleton';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useHasRole } from '@app/hooks/use-has-role';
 import { useIsFullfoert } from '@app/hooks/use-is-fullfoert';
@@ -40,7 +41,7 @@ export const SelectMedunderskriver = ({ id, medunderskriverident, typeId }: Sele
   }
 
   if (typeof data === 'undefined') {
-    return <Loader size="xlarge" />;
+    return SKELETON;
   }
 
   const { medunderskrivere } = data;

frontend/src/components/behandling/behandlingsdialog/medunderskriver/send-til-medunderskriver.tsx

@@ -38,15 +38,15 @@ export const SendTilMedunderskriver = ({
 
   const SentToMedunderskriver = () => (
     <StyledFormSection>
-      <Alert variant="info" size="small">
+      <Alert variant="info" size="small" inline>
         Sendt til {getTitleLowercase(typeId)}
       </Alert>
     </StyledFormSection>
   );
 
   const SentBackToMedunderskriver = () => (
     <StyledFormSection>
-      <Alert variant="info" size="small">
+      <Alert variant="info" size="small" inline>
         Sendt tilbake av {getTitleLowercase(typeId)}
       </Alert>
     </StyledFormSection>
@@ -86,7 +86,7 @@ export const SendTilMedunderskriver = ({
 };
 
 const StyledFormSection = styled.div`
-  margin-top: 20px;
+  margin-top: 16px;
   width: 100%;
 `;
 

frontend/src/components/behandling/behandlingsdialog/medunderskriver/skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@navikt/ds-react';
+import React from 'react';
+import styled from 'styled-components';
+
+const SkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+`;
+
+export const SKELETON = (
+  <SkeletonContainer>
+    <Skeleton variant="text" width="125px" />
+    <Skeleton variant="rounded" width="100%" height="32px" />
+  </SkeletonContainer>
+);

frontend/src/components/behandling/behandlingsdialog/messages/messages.tsx

@@ -1,5 +1,6 @@
-import { BodyShort, Heading, Loader } from '@navikt/ds-react';
+import { BodyShort, Heading } from '@navikt/ds-react';
 import React from 'react';
+import { SKELETON } from '@app/components/behandling/behandlingsdialog/messages/skeleton';
 import { isoDateTimeToPretty } from '@app/domain/date';
 import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave';
 import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id';
@@ -25,7 +26,7 @@ export const Messages = () => {
   const { data: messages, isLoading } = useGetMessagesQuery(oppgaveId, options);
 
   if (typeof oppgave === 'undefined' || typeof messages === 'undefined' || isLoading) {
-    return <Loader size="xlarge" />;
+    return SKELETON;
   }
 
   const isFeilregistrert = oppgave.feilregistrering !== null;

frontend/src/components/behandling/behandlingsdialog/messages/skeleton.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from '@navikt/ds-react';
+import React from 'react';
+import styled from 'styled-components';
+
+const SkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+`;
+
+export const SKELETON = (
+  <SkeletonContainer>
+    <Skeleton variant="text" width="125px" height="24px" />
+    <Skeleton variant="rounded" width="100%" height="62px" />
+    <Skeleton variant="rounded" width="164px" height="34px" />
+  </SkeletonContainer>
+);

frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 export const StyledMessagesContainer = styled.section`
-  padding-bottom: 1em;
+  margin-top: 16px;
+  padding-bottom: 16px;
 `;
 
 export const StyledAuthor = styled.p`

frontend/src/components/behandling/styled-components.ts

@@ -7,11 +7,13 @@ export const StyledContainer = styled.div`
   width: 640px;
   grid-column-gap: 1px;
   background-color: #c9c9c9;
+  flex-grow: 1;
 `;
 
 export const StyledBehandlingSection = styled.section`
   background-color: white;
   padding: 16px;
+  min-height: 100%;
 `;
 
 export const StyledUtfallResultat = styled.div`

frontend/src/components/common-table-components/hjemmel.tsx

@@ -1,9 +1,30 @@
 import React from 'react';
+import { LoadingCellContent } from '@app/components/common-table-components/loading-cell-content';
 import { useInnsendingshjemmelFromId } from '@app/hooks/use-kodeverk-ids';
 import { LabelMain } from '@app/styled-components/labels';
 
 interface Props {
   hjemmel: string | null;
 }
 
-export const Hjemmel = ({ hjemmel }: Props) => <LabelMain>{useInnsendingshjemmelFromId(hjemmel)}</LabelMain>;
+export const Hjemmel = ({ hjemmel }: Props) => {
+  if (hjemmel === null) {
+    return null;
+  }
+
+  return <ResolvedHjemmel hjemmel={hjemmel} />;
+};
+
+interface ResolvedProps {
+  hjemmel: string;
+}
+
+const ResolvedHjemmel = ({ hjemmel }: ResolvedProps) => {
+  const hjemmelName = useInnsendingshjemmelFromId(hjemmel);
+
+  if (hjemmelName === undefined) {
+    return <LoadingCellContent />;
+  }
+
+  return <LabelMain>{hjemmelName}</LabelMain>;
+};