✨ Oppgavetabellen blir grået litt ut når det pågår henting fra backend

Det var overhodet ingen indikasjon til saksbehandlere om at det pågikk
oppdatering av tabellinnholdet når man eksempelvis trykket seg til neste
side eller valgte inn eller ut en egenskap (filtrering).

Author: havstein

src/routes/oversikt/Oversikt.tsx

@@ -40,7 +40,11 @@ export const Oversikt = (): ReactElement => {
     const aktivTab = useAktivTab();
     const { allFilters } = useFilters();
 
-    useLoadingToast({ isLoading: oppgaveFeed.loading, message: 'Henter oppgaver' });
+    // oppgaveFeed.oppgaver blir undefined hvis man velger inn eller ut egenskaper og det blir en request apollo client
+    // ikke har gjort ennå
+    const harIkkeHentetOppgaverForGjeldendeQuery = oppgaveFeed.oppgaver === undefined && oppgaveFeed.loading;
+
+    useLoadingToast({ isLoading: harIkkeHentetOppgaverForGjeldendeQuery, message: 'Henter oppgaver' });
     useKeyboardShortcuts();
     useFjernPersonFraApolloCache();
     useRefetchDriftsmeldinger();
@@ -58,11 +62,12 @@ export const Oversikt = (): ReactElement => {
                 <section className={styles.Content}>
                     {aktivTab === TabType.BehandletIdag ? (
                         <BehandletIdagTable />
-                    ) : oppgaveFeed.loading ? (
+                    ) : harIkkeHentetOppgaverForGjeldendeQuery ? (
                         <OppgaverTableSkeleton />
                     ) : oppgaveFeed.oppgaver ? (
                         <OppgaverTable
                             oppgaver={oppgaveFeed.oppgaver}
+                            loading={oppgaveFeed.loading}
                             antallOppgaver={oppgaveFeed.antallOppgaver}
                             numberOfPages={oppgaveFeed.numberOfPages}
                             currentPage={oppgaveFeed.currentPage}

src/routes/oversikt/table/oppgaverTable/OppgaverTable.test.tsx

@@ -19,6 +19,7 @@ describe('OppgaverTable', () => {
                 limit={14}
                 setPage={() => {}}
                 oppgaver={oppgaver}
+                loading={false}
             />,
             { wrapper: ApolloWrapper },
         );
@@ -41,6 +42,7 @@ describe('OppgaverTable', () => {
                 limit={14}
                 setPage={() => {}}
                 oppgaver={oppgaver}
+                loading={false}
             />,
             { wrapper: ApolloWrapper },
         );

src/routes/oversikt/table/oppgaverTable/OppgaverTable.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { ReactElement } from 'react';
 
 import { OppgaveTilBehandling } from '@io/graphql';
@@ -15,6 +16,7 @@ import styles from '../table.module.css';
 
 interface OppgaverTableProps {
     oppgaver: OppgaveTilBehandling[];
+    loading: boolean;
     antallOppgaver: number;
     numberOfPages: number;
     currentPage: number;
@@ -23,7 +25,15 @@ interface OppgaverTableProps {
 }
 
 export const OppgaverTable = React.memo(
-    ({ oppgaver, antallOppgaver, numberOfPages, currentPage, limit, setPage }: OppgaverTableProps): ReactElement => {
+    ({
+        oppgaver,
+        loading,
+        antallOppgaver,
+        numberOfPages,
+        currentPage,
+        limit,
+        setPage,
+    }: OppgaverTableProps): ReactElement => {
         const tab = useAktivTab();
         const { activeFilters } = useFilters();
         const sort = useSorteringState();
@@ -32,7 +42,7 @@ export const OppgaverTable = React.memo(
         const setMultipleFilters = useSetMultipleFilters();
 
         return (
-            <div className={styles.TableContainer}>
+            <div className={classNames(styles.TableContainer, loading && styles.Loading)}>
                 <FilterChips
                     activeFilters={activeFilters}
                     setMultipleFilters={setMultipleFilters}

src/routes/oversikt/table/table.module.css

@@ -20,6 +20,15 @@
     vertical-align: bottom;
 }
 
+.TableContainer tbody {
+    transition: opacity 0.1s;
+}
+
+.TableContainer.Loading tbody {
+    opacity: 0.6;
+    transition: opacity 0.1s;
+}
+
 .Content {
     padding: 0;
     color: var(--a-text-default);

src/state/oppgaver.ts

@@ -70,6 +70,7 @@ export const useOppgaveFeed = (): OppgaveFeedResponse => {
             filtrering: originalFiltreringRef.current,
             sortering: originalSorteringRef.current,
         },
+        notifyOnNetworkStatusChange: true,
         initialFetchPolicy: 'network-only',
         nextFetchPolicy: 'cache-first',
         onError: () => {