From 241c31d0c2bcb9f21ba0a8d50dad45bf2f59c4ca Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Mon, 23 Sep 2024 16:03:23 +0200
Subject: [PATCH 01/12] Add generic search component and add search to group
 members

---
 app/components/common/Search/RoleSearch.tsx   |  6 +++++
 .../Search/index.tsx}                         | 26 +++++++++++--------
 app/data/fetch-roles.ts                       |  4 +--
 app/routes/assignment.resource.$id.role.tsx   |  2 +-
 app/routes/resources.$id.role-assignments.tsx |  2 +-
 app/routes/roles.$id.members.tsx              | 13 +++++++---
 app/routes/roles._index.tsx                   |  2 +-
 7 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 app/components/common/Search/RoleSearch.tsx
 rename app/components/{role/RoleSearch.tsx => common/Search/index.tsx} (61%)

diff --git a/app/components/common/Search/RoleSearch.tsx b/app/components/common/Search/RoleSearch.tsx
new file mode 100644
index 0000000..afb2e83
--- /dev/null
+++ b/app/components/common/Search/RoleSearch.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { Search } from "~/components/common/Search";
+
+export const RoleSearch = () => (
+    <Search id="search-role" label="Søk etter gruppe" />
+);
\ No newline at end of file
diff --git a/app/components/role/RoleSearch.tsx b/app/components/common/Search/index.tsx
similarity index 61%
rename from app/components/role/RoleSearch.tsx
rename to app/components/common/Search/index.tsx
index 54eb2de..e8bea98 100644
--- a/app/components/role/RoleSearch.tsx
+++ b/app/components/common/Search/index.tsx
@@ -1,4 +1,4 @@
-import {Search} from "@navikt/ds-react";
+import {Search as AkselSearch} from "@navikt/ds-react";
 import React, {useState} from "react";
 import {Form, useSearchParams} from "@remix-run/react";
 import {
@@ -7,25 +7,29 @@ import {
     handleSearchFieldString
 } from "~/components/common/CommonFunctions";
 
-export const RoleSearch = () => {
+type SearchInputProps = {
+    label: string
+    id: string
+}
 
+export const Search = ({label, id}: SearchInputProps) => {
     const [searchString, setSearchString] = useState("")
     const [searchParams, setSearchParams] = useSearchParams()
 
     const pageParam = searchParams.get("page")
 
     return (
-        <Form className={"searchField"}
-              onSubmit={(event) => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
+        <Form
+            className={"searchField"}
+            onSubmit={(event) => {
+                handleSearchFieldString(event, setSearchParams, searchString)
+                filterResetPageParam(pageParam, setSearchParams)
+            }}
         >
-            <Search
+            <AkselSearch
                 role="search"
-                id="search-role"
-                label="Søk etter gruppe"
+                id={id}
+                label={label}
                 hideLabel={false}
                 variant="secondary"
                 value={searchString}
diff --git a/app/data/fetch-roles.ts b/app/data/fetch-roles.ts
index 466b464..0189238 100644
--- a/app/data/fetch-roles.ts
+++ b/app/data/fetch-roles.ts
@@ -37,8 +37,8 @@ export const fetchRoleById = async (request: Request, id: string | undefined) =>
 
 }
 
-export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, search: string) => {
-    const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&search=${search}`, {
+export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, name: string) => {
+    const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&name=${name}`, {
         headers: request.headers
     });
 
diff --git a/app/routes/assignment.resource.$id.role.tsx b/app/routes/assignment.resource.$id.role.tsx
index bc6fe79..846dcf6 100644
--- a/app/routes/assignment.resource.$id.role.tsx
+++ b/app/routes/assignment.resource.$id.role.tsx
@@ -14,7 +14,7 @@ import {BASE_PATH} from "../../environment";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
 import {ResponseAlert} from "~/components/common/ResponseAlert";
 import ChipsFilters from "~/components/common/ChipsFilters";
-import {RoleSearch} from "~/components/role/RoleSearch";
+import {RoleSearch} from "~/components/common/Search/RoleSearch";
 
 export async function loader({params, request}: LoaderFunctionArgs): Promise<Omit<Response, "json"> & {
     json(): Promise<any>
diff --git a/app/routes/resources.$id.role-assignments.tsx b/app/routes/resources.$id.role-assignments.tsx
index 38b182c..71bd0db 100644
--- a/app/routes/resources.$id.role-assignments.tsx
+++ b/app/routes/resources.$id.role-assignments.tsx
@@ -14,7 +14,7 @@ import {fetchResourceById} from "~/data/fetch-resources";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
 import ChipsFilters from "~/components/common/ChipsFilters";
 import {ResponseAlert} from "~/components/common/ResponseAlert";
-import {RoleSearch} from "~/components/role/RoleSearch";
+import {RoleSearch} from "~/components/common/Search/RoleSearch";
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]
diff --git a/app/routes/roles.$id.members.tsx b/app/routes/roles.$id.members.tsx
index b3b3ea1..dc870f4 100644
--- a/app/routes/roles.$id.members.tsx
+++ b/app/routes/roles.$id.members.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import {Alert, Box, Detail, Heading, Tabs, VStack} from "@navikt/ds-react";
+import {Alert, Box, Detail, Heading, HStack, Tabs, VStack} from "@navikt/ds-react";
 import {Link, Links, Meta, Scripts, useLoaderData, useRouteError} from "@remix-run/react";
-import  {LoaderFunctionArgs} from "@remix-run/router";
+import {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchMembers} from "~/data/fetch-roles";
 import {json} from "@remix-run/node";
 import {MemberTable} from "~/components/role/MemberTable";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
+import {Search} from "~/components/common/Search";
 
 export async function loader({params, request}: LoaderFunctionArgs) {
     const url = new URL(request.url);
@@ -37,7 +38,13 @@ export default function Members() {
             <Tabs value={"members"}>
                 <VStack gap="4">
                     <Heading className={"heading"} level={"2"} size={"large"}>Medlemmer av gruppen</Heading>
-                    <Detail>Antall medlemmer i gruppen: {members.totalItems}</Detail>
+                    <HStack justify="space-between" gap="4">
+                        <Detail>Antall medlemmer i gruppen: {members.totalItems}</Detail>
+                        <Search
+                            label={"Søk etter medlemmer"}
+                            id={"search-member"}
+                        />
+                    </HStack>
                     <Tabs.Panel value="members" className="h-24 w-full bg-gray-50 p-4">
                         <MemberTable memberPage={members} size={size} />
                     </Tabs.Panel>
diff --git a/app/routes/roles._index.tsx b/app/routes/roles._index.tsx
index fe94e0f..69a9668 100644
--- a/app/routes/roles._index.tsx
+++ b/app/routes/roles._index.tsx
@@ -6,7 +6,7 @@ import type {IRoleList, IUnitItem, IUnitTree} from "~/data/types";
 import type {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchRoles} from "~/data/fetch-roles";
 import {RoleTable} from "~/components/role/RoleTable";
-import {RoleSearch} from "~/components/role/RoleSearch";
+import {RoleSearch} from "~/components/common/Search/RoleSearch";
 import {fetchOrgUnits} from "~/data/fetch-resources";
 import OrgUnitFilterModal from "../components/org-unit-filter/OrgUnitFilterModal";
 import ChipsFilters from "~/components/common/ChipsFilters";

From 20ccced0cfd11094d22f0b537aa20731a301a866 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Tue, 24 Sep 2024 10:37:57 +0200
Subject: [PATCH 02/12] Add chip

---
 app/components/common/Search/index.tsx | 1 +
 app/routes/roles.$id.members.tsx       | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/app/components/common/Search/index.tsx b/app/components/common/Search/index.tsx
index e8bea98..a43ff81 100644
--- a/app/components/common/Search/index.tsx
+++ b/app/components/common/Search/index.tsx
@@ -23,6 +23,7 @@ export const Search = ({label, id}: SearchInputProps) => {
             className={"searchField"}
             onSubmit={(event) => {
                 handleSearchFieldString(event, setSearchParams, searchString)
+                setSearchString("")
                 filterResetPageParam(pageParam, setSearchParams)
             }}
         >
diff --git a/app/routes/roles.$id.members.tsx b/app/routes/roles.$id.members.tsx
index dc870f4..549b86d 100644
--- a/app/routes/roles.$id.members.tsx
+++ b/app/routes/roles.$id.members.tsx
@@ -7,6 +7,7 @@ import {json} from "@remix-run/node";
 import {MemberTable} from "~/components/role/MemberTable";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
 import {Search} from "~/components/common/Search";
+import ChipsFilters from "~/components/common/ChipsFilters";
 
 export async function loader({params, request}: LoaderFunctionArgs) {
     const url = new URL(request.url);
@@ -45,6 +46,9 @@ export default function Members() {
                             id={"search-member"}
                         />
                     </HStack>
+                    <HStack justify="end">
+                        <ChipsFilters/>
+                    </HStack>
                     <Tabs.Panel value="members" className="h-24 w-full bg-gray-50 p-4">
                         <MemberTable memberPage={members} size={size} />
                     </Tabs.Panel>

From f9e6585c2c2d8674390aebb37ffddbdb8f82c8a6 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Fri, 27 Sep 2024 12:47:47 +0200
Subject: [PATCH 03/12] Replace most of the search components

---
 .../assignment/AssignedRolesSearch.tsx        | 27 ++-----------
 .../assignment/AssignedUsersSearch.tsx        |  2 +-
 .../assignment/NewAssignmentRoleSearch.tsx    |  1 +
 .../assignment/NewAssignmentUserSearch.tsx    |  1 +
 .../common/{Search/index.tsx => Search.tsx}   |  0
 .../resource-admin/ResourceSearch.tsx         | 34 ----------------
 .../ResourceModuleSearch.tsx                  | 23 +++--------
 app/components/resource/ResourceSearch.tsx    | 39 ++-----------------
 .../{common/Search => role}/RoleSearch.tsx    |  0
 app/components/user/UserSearch.tsx            | 38 ++----------------
 app/routes/assignment.resource.$id.role.tsx   |  2 +-
 app/routes/resource-admin._index.tsx          |  5 +--
 app/routes/resource-module-admin._index.tsx   |  2 +-
 ...urce-module-admin.opprett-ny-tildeling.tsx |  2 +-
 app/routes/resources.$id.role-assignments.tsx |  2 +-
 app/routes/roles.$id.members.tsx              | 10 ++---
 app/routes/roles._index.tsx                   |  2 +-
 17 files changed, 29 insertions(+), 161 deletions(-)
 rename app/components/common/{Search/index.tsx => Search.tsx} (100%)
 delete mode 100644 app/components/resource-admin/ResourceSearch.tsx
 rename app/components/{common/Search => role}/RoleSearch.tsx (100%)

diff --git a/app/components/assignment/AssignedRolesSearch.tsx b/app/components/assignment/AssignedRolesSearch.tsx
index 4834728..cea8cf7 100644
--- a/app/components/assignment/AssignedRolesSearch.tsx
+++ b/app/components/assignment/AssignedRolesSearch.tsx
@@ -1,29 +1,8 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useParams, useSubmit} from "@remix-run/react";
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 export const AssignedRolesSearch = () => {
-
-    const submit = useSubmit();
-    const [searchString, setSearchString] = useState("")
-    const params = useParams();
-
     return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  submit({search: searchString}, {method: "GET", action: `/resources/${params.id}/role-assignments`})
-                  event.preventDefault()
-              }}>
-            <Search
-                role="search"
-                label="Søk etter gruppe"
-                hideLabel={false}
-                variant="secondary"
-                onChange={event => setSearchString(event)}
-                onClear={event => {
-                    submit({search: ""}, {method: "GET", action: `/resources/${params.id}/role-assignments`})
-                }}
-            />
-        </Form>
+        <Search label={"Søk etter gruppe"} id={"assigned-role-search"} />
     );
 };
\ No newline at end of file
diff --git a/app/components/assignment/AssignedUsersSearch.tsx b/app/components/assignment/AssignedUsersSearch.tsx
index b620f73..abc4d97 100644
--- a/app/components/assignment/AssignedUsersSearch.tsx
+++ b/app/components/assignment/AssignedUsersSearch.tsx
@@ -4,7 +4,7 @@ import {Form, useParams, useSearchParams, useSubmit} from "@remix-run/react";
 import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
 
 export const AssignedUsersSearch = () => {
-
+// TODO: replace with common/search
     const submit = useSubmit();
     const [searchString, setSearchString] = useState("")
     const params = useParams();
diff --git a/app/components/assignment/NewAssignmentRoleSearch.tsx b/app/components/assignment/NewAssignmentRoleSearch.tsx
index cae16b9..b05d68e 100644
--- a/app/components/assignment/NewAssignmentRoleSearch.tsx
+++ b/app/components/assignment/NewAssignmentRoleSearch.tsx
@@ -4,6 +4,7 @@ import {Form, useParams, useSubmit} from "@remix-run/react";
 
 
 export const NewAssignmentRoleSearch = () => {
+// TODO: replace with common/search
 
     const submit = useSubmit();
     const params = useParams();
diff --git a/app/components/assignment/NewAssignmentUserSearch.tsx b/app/components/assignment/NewAssignmentUserSearch.tsx
index ee342f1..bdc9786 100644
--- a/app/components/assignment/NewAssignmentUserSearch.tsx
+++ b/app/components/assignment/NewAssignmentUserSearch.tsx
@@ -4,6 +4,7 @@ import {Form, useParams, useSubmit} from "@remix-run/react";
 
 
 export const NewAssignmentUserSearch = () => {
+// TODO: replace with common/search
 
     const submit = useSubmit();
     const params = useParams();
diff --git a/app/components/common/Search/index.tsx b/app/components/common/Search.tsx
similarity index 100%
rename from app/components/common/Search/index.tsx
rename to app/components/common/Search.tsx
diff --git a/app/components/resource-admin/ResourceSearch.tsx b/app/components/resource-admin/ResourceSearch.tsx
deleted file mode 100644
index a050218..0000000
--- a/app/components/resource-admin/ResourceSearch.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Search} from "@navikt/ds-react";
-import {Form, useSearchParams, useSubmit} from "@remix-run/react";
-import {filterResetPageParam} from "~/components/common/CommonFunctions";
-import {useState} from "react";
-import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
-
-export const ResourceSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-    return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  filterResetPageParam(pageParam, setSearchParams)
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-              }}
-        >
-            <Search
-                role="search"
-                label="Søk etter ressurs"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
-    );
-};
\ No newline at end of file
diff --git a/app/components/resource-module-admin/ResourceModuleSearch.tsx b/app/components/resource-module-admin/ResourceModuleSearch.tsx
index af4701e..4b4505a 100644
--- a/app/components/resource-module-admin/ResourceModuleSearch.tsx
+++ b/app/components/resource-module-admin/ResourceModuleSearch.tsx
@@ -1,23 +1,12 @@
-import {Search} from "@navikt/ds-react";
-import {useSearchParams} from "@remix-run/react";
-import React, {useState} from "react";
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 const ResourceModuleSearch = () => {
-    const [searchValue, setSearchValue] = useState("")
-    const [, setSearchParams] = useSearchParams()
-
-    const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
-        setSearchParams(searchParams => {
-            searchValue ? searchParams.set("name", searchValue) : searchParams.delete("name")
-            return searchParams
-        })
-        event.preventDefault() // Prevent refresh of page
-    }
-
     return (
-        <form onSubmit={(event) => handleSearch(event)}>
-            <Search label="Søk etter brukere med rolle" hideLabel={false} variant="secondary" onChange={event => setSearchValue(event)} />
-        </form>
+        <Search
+            label="Søk etter brukere med rolle"
+            id={"search-user-role"}
+        />
     )
 }
 
diff --git a/app/components/resource/ResourceSearch.tsx b/app/components/resource/ResourceSearch.tsx
index 2c08293..d6f1616 100644
--- a/app/components/resource/ResourceSearch.tsx
+++ b/app/components/resource/ResourceSearch.tsx
@@ -1,39 +1,6 @@
-import {Search} from "@navikt/ds-react";
-import {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
-import {
-    filterResetPageParam,
-    handleClearSearchFieldString,
-    handleSearchFieldString
-} from "~/components/common/CommonFunctions";
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 export const ResourceSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-
-    return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
-        >
-            <Search
-                id="search-resource"
-                role="search"
-                label="Søk etter ressurs"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
-    );
+    return <Search id="search-resource" label="Søk etter ressurs" />
 };
\ No newline at end of file
diff --git a/app/components/common/Search/RoleSearch.tsx b/app/components/role/RoleSearch.tsx
similarity index 100%
rename from app/components/common/Search/RoleSearch.tsx
rename to app/components/role/RoleSearch.tsx
diff --git a/app/components/user/UserSearch.tsx b/app/components/user/UserSearch.tsx
index f63a9d4..156bc1a 100644
--- a/app/components/user/UserSearch.tsx
+++ b/app/components/user/UserSearch.tsx
@@ -1,40 +1,8 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
-import {
-    filterResetPageParam,
-    handleClearSearchFieldString,
-    handleSearchFieldString
-} from "~/components/common/CommonFunctions";
-
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 export const UserSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-
     return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
-        >
-            <Search
-                role="search"
-                label="Søk etter bruker"
-                id="user-search"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
+        <Search label={"Søk etter bruker"} id={"user-search"} />
     );
 };
\ No newline at end of file
diff --git a/app/routes/assignment.resource.$id.role.tsx b/app/routes/assignment.resource.$id.role.tsx
index 846dcf6..bc6fe79 100644
--- a/app/routes/assignment.resource.$id.role.tsx
+++ b/app/routes/assignment.resource.$id.role.tsx
@@ -14,7 +14,7 @@ import {BASE_PATH} from "../../environment";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
 import {ResponseAlert} from "~/components/common/ResponseAlert";
 import ChipsFilters from "~/components/common/ChipsFilters";
-import {RoleSearch} from "~/components/common/Search/RoleSearch";
+import {RoleSearch} from "~/components/role/RoleSearch";
 
 export async function loader({params, request}: LoaderFunctionArgs): Promise<Omit<Response, "json"> & {
     json(): Promise<any>
diff --git a/app/routes/resource-admin._index.tsx b/app/routes/resource-admin._index.tsx
index 203347c..8308e48 100644
--- a/app/routes/resource-admin._index.tsx
+++ b/app/routes/resource-admin._index.tsx
@@ -4,7 +4,7 @@ import {Links, Meta, Scripts, useLoaderData, useRouteError} from "@remix-run/rea
 import {IResourceAdminList, IUnitItem, IUnitTree} from "~/data/types";
 import type {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchApplicationCategory, fetchOrgUnits, fetchResourcesForAdmin} from "~/data/fetch-resources";
-import {ResourceSearch} from "~/components/resource-admin/ResourceSearch";
+import {Search} from "~/components/common/Search";
 import {ResourceAdminTable} from "~/components/resource-admin/ResourceAdminTable";
 import ChipsFilters from "~/components/common/ChipsFilters";
 import {ResourceSelectApplicationCategory} from "~/components/resource-admin/ResourceSelectApplicationCategory";
@@ -97,8 +97,7 @@ export default function ResourceAdminIndex() {
                         </option>
                     ))}
                 </Select>*/}
-
-                    <ResourceSearch/>
+                    <Search label={"Søk etter ressurs"} id={"search-resource-admin"}/>
                 </HStack>
             </HStack>
             <HStack justify="end">
diff --git a/app/routes/resource-module-admin._index.tsx b/app/routes/resource-module-admin._index.tsx
index c07f21b..5a92f71 100644
--- a/app/routes/resource-module-admin._index.tsx
+++ b/app/routes/resource-module-admin._index.tsx
@@ -25,7 +25,7 @@ export async function loader({request}: LoaderFunctionArgs) {
     const size = Number(url.searchParams.get("size") ?? "10");
     const page = Number(url.searchParams.get("page") ?? "0");
     const orgunits: string[] = url.searchParams.get("orgUnits")?.split(",") ?? [""];
-    const name = url.searchParams.get("name") ?? "";
+    const name = url.searchParams.get("search") ?? "";
     const role = url.searchParams.get("accessroleid") ?? "";
 
     const responseUsersPage = await fetchUsersWithAssignment(auth, page, size, orgunits, name, role);
diff --git a/app/routes/resource-module-admin.opprett-ny-tildeling.tsx b/app/routes/resource-module-admin.opprett-ny-tildeling.tsx
index 76e470d..85685aa 100644
--- a/app/routes/resource-module-admin.opprett-ny-tildeling.tsx
+++ b/app/routes/resource-module-admin.opprett-ny-tildeling.tsx
@@ -55,7 +55,7 @@ export async function loader({request}: LoaderFunctionArgs) {
     const itemsPerPage = url.searchParams.get("size") ?? "10";
     const currentPage = url.searchParams.get("page") ?? "0";
     const orgUnitIds = url.searchParams.get("orgUnits")?.split(",") ?? [];
-    const name = url.searchParams.get("name") ?? "";
+    const name = url.searchParams.get("search") ?? "";
     const roleFilter = url.searchParams.get("accessroleid") ?? ""
 
     const usersPageResponse = await fetchUsersWhoCanGetAssignments(auth, Number(currentPage), Number(itemsPerPage), orgUnitIds, name, roleFilter);
diff --git a/app/routes/resources.$id.role-assignments.tsx b/app/routes/resources.$id.role-assignments.tsx
index 71bd0db..38b182c 100644
--- a/app/routes/resources.$id.role-assignments.tsx
+++ b/app/routes/resources.$id.role-assignments.tsx
@@ -14,7 +14,7 @@ import {fetchResourceById} from "~/data/fetch-resources";
 import {getSizeCookieFromRequestHeader} from "~/components/common/CommonFunctions";
 import ChipsFilters from "~/components/common/ChipsFilters";
 import {ResponseAlert} from "~/components/common/ResponseAlert";
-import {RoleSearch} from "~/components/common/Search/RoleSearch";
+import {RoleSearch} from "~/components/role/RoleSearch";
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]
diff --git a/app/routes/roles.$id.members.tsx b/app/routes/roles.$id.members.tsx
index 549b86d..fedcc56 100644
--- a/app/routes/roles.$id.members.tsx
+++ b/app/routes/roles.$id.members.tsx
@@ -26,7 +26,7 @@ export async function loader({params, request}: LoaderFunctionArgs) {
 
 export const handle = {
     // @ts-ignore
-    breadcrumb: ({ params, data }) => <Link to={`/roles/${params.id}/members`}>Medlemmer</Link>
+    breadcrumb: ({params, data}) => <Link to={`/roles/${params.id}/members`}>Medlemmer</Link>
 }
 
 export default function Members() {
@@ -41,22 +41,20 @@ export default function Members() {
                     <Heading className={"heading"} level={"2"} size={"large"}>Medlemmer av gruppen</Heading>
                     <HStack justify="space-between" gap="4">
                         <Detail>Antall medlemmer i gruppen: {members.totalItems}</Detail>
-                        <Search
-                            label={"Søk etter medlemmer"}
-                            id={"search-member"}
-                        />
+                        <Search label={"Søk etter medlemmer"} id={"search-member"}/>
                     </HStack>
                     <HStack justify="end">
                         <ChipsFilters/>
                     </HStack>
                     <Tabs.Panel value="members" className="h-24 w-full bg-gray-50 p-4">
-                        <MemberTable memberPage={members} size={size} />
+                        <MemberTable memberPage={members} size={size}/>
                     </Tabs.Panel>
                 </VStack>
             </Tabs>
         </section>
     );
 }
+
 export function ErrorBoundary() {
     const error: any = useRouteError();
     // console.error(error);
diff --git a/app/routes/roles._index.tsx b/app/routes/roles._index.tsx
index 69a9668..fe94e0f 100644
--- a/app/routes/roles._index.tsx
+++ b/app/routes/roles._index.tsx
@@ -6,7 +6,7 @@ import type {IRoleList, IUnitItem, IUnitTree} from "~/data/types";
 import type {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchRoles} from "~/data/fetch-roles";
 import {RoleTable} from "~/components/role/RoleTable";
-import {RoleSearch} from "~/components/common/Search/RoleSearch";
+import {RoleSearch} from "~/components/role/RoleSearch";
 import {fetchOrgUnits} from "~/data/fetch-resources";
 import OrgUnitFilterModal from "../components/org-unit-filter/OrgUnitFilterModal";
 import ChipsFilters from "~/components/common/ChipsFilters";

From 1aac7d167dc52495008ed40043cb9dcd9f2ef2aa Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Mon, 30 Sep 2024 09:46:25 +0200
Subject: [PATCH 04/12] Delete unused components

---
 .../assignment/AssignedRolesSearch.tsx        |  8 -----
 .../assignment/AssignedUsersSearch.tsx        | 32 -------------------
 .../assignment/NewAssignmentRoleSearch.tsx    | 31 ------------------
 .../assignment/NewAssignmentUserSearch.tsx    | 32 -------------------
 4 files changed, 103 deletions(-)
 delete mode 100644 app/components/assignment/AssignedRolesSearch.tsx
 delete mode 100644 app/components/assignment/AssignedUsersSearch.tsx
 delete mode 100644 app/components/assignment/NewAssignmentRoleSearch.tsx
 delete mode 100644 app/components/assignment/NewAssignmentUserSearch.tsx

diff --git a/app/components/assignment/AssignedRolesSearch.tsx b/app/components/assignment/AssignedRolesSearch.tsx
deleted file mode 100644
index cea8cf7..0000000
--- a/app/components/assignment/AssignedRolesSearch.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import {Search} from "~/components/common/Search";
-
-export const AssignedRolesSearch = () => {
-    return (
-        <Search label={"Søk etter gruppe"} id={"assigned-role-search"} />
-    );
-};
\ No newline at end of file
diff --git a/app/components/assignment/AssignedUsersSearch.tsx b/app/components/assignment/AssignedUsersSearch.tsx
deleted file mode 100644
index abc4d97..0000000
--- a/app/components/assignment/AssignedUsersSearch.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useParams, useSearchParams, useSubmit} from "@remix-run/react";
-import {handleClearSearchFieldString, handleSearchFieldString} from "~/components/common/CommonFunctions";
-
-export const AssignedUsersSearch = () => {
-// TODO: replace with common/search
-    const submit = useSubmit();
-    const [searchString, setSearchString] = useState("")
-    const params = useParams();
-    const [, setSearchParams] = useSearchParams()
-
-    return (
-        <Form className={"searchField"}
-              method={"GET"}
-              action={`/resources/${params.id}/user-assignments`}
-              onSubmit={(event) => handleSearchFieldString(event, setSearchParams, searchString)}
-        >
-            <Search
-                role="search"
-                id="user-search"
-                label="Søk etter bruker"
-                hideLabel={false}
-                variant="secondary"
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
-    );
-};
\ No newline at end of file
diff --git a/app/components/assignment/NewAssignmentRoleSearch.tsx b/app/components/assignment/NewAssignmentRoleSearch.tsx
deleted file mode 100644
index b05d68e..0000000
--- a/app/components/assignment/NewAssignmentRoleSearch.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useParams, useSubmit} from "@remix-run/react";
-
-
-export const NewAssignmentRoleSearch = () => {
-// TODO: replace with common/search
-
-    const submit = useSubmit();
-    const params = useParams();
-    const [searchString, setSearchString] = useState("");
-
-    return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  submit({search: searchString}, {method: "GET", action: `/assignment/resource/${params.id}/role`})
-                  event.preventDefault()
-              }}>
-            <Search
-                role="search"
-                label="Søk etter gruppe"
-                variant="secondary"
-                hideLabel={false}
-                onChange={event => setSearchString(event)}
-                onClear={event => {
-                    submit({search: ""}, {method: "GET", action: `/assignment/resource/${params.id}/role`})
-                }}
-            />
-        </Form >
-    );
-};
\ No newline at end of file
diff --git a/app/components/assignment/NewAssignmentUserSearch.tsx b/app/components/assignment/NewAssignmentUserSearch.tsx
deleted file mode 100644
index bdc9786..0000000
--- a/app/components/assignment/NewAssignmentUserSearch.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useParams, useSubmit} from "@remix-run/react";
-
-
-export const NewAssignmentUserSearch = () => {
-// TODO: replace with common/search
-
-    const submit = useSubmit();
-    const params = useParams();
-    const [searchString, setSearchString] = useState("");
-
-    return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  submit({search: searchString}, {method: "GET", action: `/assignment/resource/${params.id}/user`})
-                  event.preventDefault()
-              }}>
-            <Search
-                role="search"
-                id="user-search"
-                label="Søk etter bruker"
-                hideLabel={false}
-                variant="secondary"
-                onChange={event => setSearchString(event)}
-                onClear={event => {
-                    submit({search: ""}, {method: "GET", action: `/assignment/resource/${params.id}/user`})
-                }}
-            />
-        </Form>
-    );
-};
\ No newline at end of file

From 9d0aeac63aa03ec532a4e364b3936b79b3d9f786 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Tue, 1 Oct 2024 15:05:41 +0200
Subject: [PATCH 05/12] Add spinner to search button

---
 app/components/common/Search.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/common/Search.tsx b/app/components/common/Search.tsx
index a43ff81..2978e1c 100644
--- a/app/components/common/Search.tsx
+++ b/app/components/common/Search.tsx
@@ -1,6 +1,6 @@
 import {Search as AkselSearch} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
+import {Form, useNavigation, useSearchParams} from "@remix-run/react";
 import {
     filterResetPageParam,
     handleClearSearchFieldString,
@@ -16,6 +16,9 @@ export const Search = ({label, id}: SearchInputProps) => {
     const [searchString, setSearchString] = useState("")
     const [searchParams, setSearchParams] = useSearchParams()
 
+    const navigation = useNavigation()
+    const searching = navigation.location && new URLSearchParams(navigation.location.search).has("search");
+
     const pageParam = searchParams.get("page")
 
     return (
@@ -38,7 +41,8 @@ export const Search = ({label, id}: SearchInputProps) => {
                 onClear={() => {
                     handleClearSearchFieldString(setSearchParams)
                 }}
-            />
+            > <AkselSearch.Button loading={searching}/>
+            </AkselSearch>
         </Form>
     );
 };
\ No newline at end of file

From 84af4d355274363d0a6ae9cd08ffb65b918ef741 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Tue, 1 Oct 2024 15:06:13 +0200
Subject: [PATCH 06/12] Prevent button text form breacking

---
 app/styles/main.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/styles/main.css b/app/styles/main.css
index b884270..58e972a 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -156,4 +156,8 @@ table {
 
 .navds-tag-in-table{
     margin: var(--a-spacing-3) var(--a-spacing-5);
-}
\ No newline at end of file
+}
+
+button {
+    white-space: nowrap;
+}

From c7346df6a462f61eb7efa52c6ecbfa6d8ef51610 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Tue, 1 Oct 2024 15:09:09 +0200
Subject: [PATCH 07/12] Add Skeleton to tables with data fetching

---
 .../assignment/AssignedRolesTable.tsx         |  9 ++-
 .../assignment/AssignedUsersTable.tsx         |  9 ++-
 .../assignment/NewAssignmentRoleTable.tsx     |  9 ++-
 .../assignment/NewAssignmentUserTable.tsx     |  9 ++-
 app/components/common/CommonFunctions.ts      |  4 ++
 app/components/common/Table/TableSkeleton.tsx | 26 ++++++++
 .../resource-admin/ResourceAdminTable.tsx     |  9 ++-
 .../ResourceModuleAdminUsersTable.tsx         | 34 +++++-----
 .../administer/RoleAssignmentTable.tsx        |  9 ++-
 app/components/resource/ResourceTable.tsx     |  9 ++-
 .../role/AssignResourceToRoleTable.tsx        |  9 ++-
 app/components/role/MemberTable.tsx           |  9 ++-
 app/components/role/RoleTable.tsx             | 64 ++++++++++---------
 .../user/AssignResourceToUserTable.tsx        |  9 ++-
 .../user/AssignmentsForUserTable.tsx          |  9 ++-
 app/components/user/UserTable.tsx             | 10 +--
 16 files changed, 155 insertions(+), 82 deletions(-)
 create mode 100644 app/components/common/Table/TableSkeleton.tsx

diff --git a/app/components/assignment/AssignedRolesTable.tsx b/app/components/assignment/AssignedRolesTable.tsx
index ccb1e25..781381f 100644
--- a/app/components/assignment/AssignedRolesTable.tsx
+++ b/app/components/assignment/AssignedRolesTable.tsx
@@ -1,9 +1,10 @@
 import {Box, Button, Heading, Link, Pagination, Select, Table, VStack} from "@navikt/ds-react";
 import type {IAssignedRoles} from "~/data/types";
 import React from "react";
-import {Outlet, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 export const AssignedRolesTable: any = (props: {
     assignedRoles: IAssignedRoles,
@@ -15,6 +16,8 @@ export const AssignedRolesTable: any = (props: {
 
     const [searchParams, setSearchParams] = useSearchParams()
     const params = useParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -41,7 +44,7 @@ export const AssignedRolesTable: any = (props: {
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {props.assignedRoles.roles.map((role) => (
+                        {loading ? <TableSkeleton /> : props.assignedRoles.roles.map((role) => (
                             <Table.Row key={role.id}>
                                 <Table.HeaderCell scope="row">{role.roleName}</Table.HeaderCell>
                                 <Table.DataCell>{role.roleType}</Table.DataCell>
diff --git a/app/components/assignment/AssignedUsersTable.tsx b/app/components/assignment/AssignedUsersTable.tsx
index 8746b93..0b4983a 100644
--- a/app/components/assignment/AssignedUsersTable.tsx
+++ b/app/components/assignment/AssignedUsersTable.tsx
@@ -1,9 +1,10 @@
 import {Box, Button, Heading, Link, Pagination, Select, Table, Tag, VStack} from "@navikt/ds-react";
 import type {IAssignedUsers} from "~/data/types";
 import React from "react";
-import {Outlet, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface AssignedUsersTableProps {
     assignedUsers: IAssignedUsers, size: string
@@ -14,6 +15,8 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
 
     const [searchParams, setSearchParams] = useSearchParams()
     const params = useParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -41,7 +44,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {assignedUsers.users.map((user) => (
+                        {loading ? <TableSkeleton columns={5}/> : assignedUsers.users.map((user) => (
                             <Table.Row key={user.assigneeRef}>
                                 <Table.HeaderCell scope="row">{user.assigneeFirstName} {user.assigneeLastName}</Table.HeaderCell>
                                 <Table.DataCell>{user.assigneeUserType}</Table.DataCell>
diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx
index 8971997..0cbaf7d 100644
--- a/app/components/assignment/NewAssignmentRoleTable.tsx
+++ b/app/components/assignment/NewAssignmentRoleTable.tsx
@@ -1,9 +1,10 @@
 import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
 import type {IRole} from "~/data/types";
 import React from "react";
-import {Outlet, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 export const AssignRoleTable: any = (props: {
     isAssignedRoles: IRole[],
@@ -16,6 +17,8 @@ export const AssignRoleTable: any = (props: {
 }) => {
 
     const [searchParams, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -39,7 +42,7 @@ export const AssignRoleTable: any = (props: {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {props.isAssignedRoles.map((role: IRole) => (
+                    {loading ? <TableSkeleton /> : props.isAssignedRoles.map((role: IRole) => (
                         <Table.Row key={role.id}>
                             <Table.HeaderCell scope="row">{role.roleName} </Table.HeaderCell>
                             <Table.DataCell>{role.roleType}</Table.DataCell>
diff --git a/app/components/assignment/NewAssignmentUserTable.tsx b/app/components/assignment/NewAssignmentUserTable.tsx
index 90c807b..74006f0 100644
--- a/app/components/assignment/NewAssignmentUserTable.tsx
+++ b/app/components/assignment/NewAssignmentUserTable.tsx
@@ -1,9 +1,10 @@
 import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
 import type {IUser, IUserItem} from "~/data/types";
 import React from "react";
-import {Outlet, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 
 interface AssignUserTableProps {
@@ -23,6 +24,8 @@ export const AssignUserTable = ({
     basePath,
 }: AssignUserTableProps) => {
     const [searchParams, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -48,7 +51,7 @@ export const AssignUserTable = ({
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {isAssignedUsers.map((user: IUserItem) => (
+                    {loading ? <TableSkeleton /> : isAssignedUsers.map((user: IUserItem) => (
                         <Table.Row key={user.id}>
                             <Table.DataCell scope="row">{user.fullName} </Table.DataCell>
                             <Table.DataCell>{user.userType}</Table.DataCell>
diff --git a/app/components/common/CommonFunctions.ts b/app/components/common/CommonFunctions.ts
index 07398a9..0526859 100644
--- a/app/components/common/CommonFunctions.ts
+++ b/app/components/common/CommonFunctions.ts
@@ -1,6 +1,7 @@
 import React from "react";
 import {SetURLSearchParams} from "react-router-dom";
 import {ICookie} from "~/data/types";
+import {Navigation} from "@remix-run/react";
 
 // Discovers all query params and formats them. Returns a string prepared for insertion in an url.
 export const prepareQueryParams = (searchParams: URLSearchParams): string => {
@@ -95,3 +96,6 @@ export const getSizeCookieFromRequestHeader = (request: Request): ICookie | null
     }
     return null;
 };
+
+export const isLoading = ({location}: Navigation) =>
+    location && new URLSearchParams(location.search).size > 0;
diff --git a/app/components/common/Table/TableSkeleton.tsx b/app/components/common/Table/TableSkeleton.tsx
new file mode 100644
index 0000000..087ca76
--- /dev/null
+++ b/app/components/common/Table/TableSkeleton.tsx
@@ -0,0 +1,26 @@
+import {Skeleton, Table} from "@navikt/ds-react";
+import React from "react";
+
+type LoadingSpinnerProps = {
+    columns?: number
+    rows?: number
+    height?: number
+}
+
+const SkeletonRow = ({ columns = 4, height = 50 }: LoadingSpinnerProps) => (
+    <Table.Row>
+        {Array.from({ length: columns }).map((_, index) => (
+            <Table.DataCell key={index}>
+                <Skeleton variant="text" height={height} width="100%" />
+            </Table.DataCell>
+        ))}
+    </Table.Row>
+);
+
+export const TableSkeleton = ({ rows = 4, columns = 4, height = 50 }: LoadingSpinnerProps) => (
+    <>
+        {Array.from({ length: rows }).map((_, index) => (
+            <SkeletonRow key={index} columns={columns} height={height}/>
+        ))}
+    </>
+);
\ No newline at end of file
diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx
index 936a4f4..e18d769 100644
--- a/app/components/resource-admin/ResourceAdminTable.tsx
+++ b/app/components/resource-admin/ResourceAdminTable.tsx
@@ -1,10 +1,11 @@
 import {Button, Dropdown, HStack, Link, Pagination, Select, Table} from "@navikt/ds-react";
 import {FunnelIcon, InformationSquareIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons";
-import {Form, Outlet, useNavigate, useSearchParams} from "@remix-run/react";
+import {Form, Outlet, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import type {IResourceAdminList} from "~/data/types";
 import React from "react";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
 import {StatusTag} from "~/components/resource-admin/StatusTag";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface ResourceTableProps {
     resourcePage: IResourceAdminList,
@@ -16,6 +17,8 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
 
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const setStatusFilter = (event: string) => {
         setSearchParams(searchParams => {
@@ -78,7 +81,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {resourcePage.resources.map((resource) => (
+                    {loading ? <TableSkeleton columns={5} /> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell>{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
index ba9748d..4c3ac99 100644
--- a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
+++ b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
@@ -1,5 +1,5 @@
 import {Button, Pagination, Select, Table} from "@navikt/ds-react";
-import {Form, useNavigate, useSearchParams} from "@remix-run/react";
+import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {
     IResourceModuleAccessRole,
@@ -7,7 +7,8 @@ import {
     IResourceModuleUsersPage
 } from "~/data/resourceModuleAdmin/types";
 import {IUnitItem} from "~/data/types";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface ResourceModuleAdminUsersTableI {
     usersPage: IResourceModuleUsersPage
@@ -17,8 +18,9 @@ interface ResourceModuleAdminUsersTableI {
 
 const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTableI) => {
     const navigate = useNavigate()
-
+    const navigation = useNavigation()
     const [params, setSearchParams] = useSearchParams()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -39,18 +41,20 @@ const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTabl
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {usersPage.users.map((user: IResourceModuleUser, index) => {
-                        return (
-                            <Table.Row key={index + user.userName}>
-                            <Table.DataCell>{user.firstName + " " + user.lastName}</Table.DataCell>
-                            <Table.DataCell>{user.userName}</Table.DataCell>
-                            <Table.DataCell align={"center"}>
-                                <Button variant={"secondary"} onClick={() => navigate(`administer/${user.resourceId}`)}>
-                                    Administrer
-                                </Button>
-                            </Table.DataCell>
-                        </Table.Row>)
-                    })}
+                    {loading ?
+                        <TableSkeleton columns={3}/> : usersPage.users.map((user: IResourceModuleUser, index) => {
+                            return (
+                                <Table.Row key={index + user.userName}>
+                                    <Table.DataCell>{user.firstName + " " + user.lastName}</Table.DataCell>
+                                    <Table.DataCell>{user.userName}</Table.DataCell>
+                                    <Table.DataCell align={"center"}>
+                                        <Button variant={"secondary"}
+                                                onClick={() => navigate(`administer/${user.resourceId}`)}>
+                                            Administrer
+                                        </Button>
+                                    </Table.DataCell>
+                                </Table.Row>)
+                        })}
                 </Table.Body>
             </Table>
             {usersPage.users.length > 0 &&
diff --git a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
index 6e16691..9efc2b6 100644
--- a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
+++ b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
@@ -1,6 +1,6 @@
 import {Alert, Button, Pagination, Select, Table} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
+import {Form, useNavigation, useSearchParams} from "@remix-run/react";
 import {
     IResourceModuleAccessRole,
     IResourceModuleOrgUnitDetail,
@@ -8,7 +8,8 @@ import {
 } from "~/data/resourceModuleAdmin/types";
 import {TrashIcon} from "@navikt/aksel-icons";
 import DeleteOrgUnitInAssignment from "~/components/resource-module-admin/administer/DeleteOrgUnitInAssignment";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface RoleAssignmentTableProps {
     selectedRole: IResourceModuleAccessRole
@@ -19,6 +20,8 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
     const [orgUnit, setOrgUnit] = useState<IResourceModuleOrgUnitDetail | undefined>()
     const [scopeId, setScopeId] = useState("")
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const [params, setSearchParams] = useSearchParams()
 
@@ -66,7 +69,7 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {userAssignmentsPaginated?.accessRoles.length !== 0 ? (
+                    {loading ? <TableSkeleton columns={selectedRole.accessRoleId === "" ? 3 : 2} height={30} /> :userAssignmentsPaginated?.accessRoles.length !== 0 ? (
                         userAssignmentsPaginated?.accessRoles.map((scope) =>
                             scope.orgUnits.map((orgUnit) => (
                                 <Table.Row
diff --git a/app/components/resource/ResourceTable.tsx b/app/components/resource/ResourceTable.tsx
index c3059d3..ce1c821 100644
--- a/app/components/resource/ResourceTable.tsx
+++ b/app/components/resource/ResourceTable.tsx
@@ -1,9 +1,10 @@
 import {Button, Pagination, Select, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useSearchParams} from "@remix-run/react";
+import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import type {IResourceList} from "~/data/types";
 import React from "react";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface ResourceTableProps {
     resourcePage: IResourceList
@@ -14,6 +15,8 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
 
     const navigate = useNavigate();
     const [, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -34,7 +37,7 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {resourcePage.resources.map((resource) => (
+                    {loading ? <TableSkeleton  columns={3}/> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell scope="row">{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/role/AssignResourceToRoleTable.tsx b/app/components/role/AssignResourceToRoleTable.tsx
index 22e1c6c..9548f03 100644
--- a/app/components/role/AssignResourceToRoleTable.tsx
+++ b/app/components/role/AssignResourceToRoleTable.tsx
@@ -1,9 +1,10 @@
 import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
 import type {IResourceForList} from "~/data/types";
 import React from "react";
-import {Outlet, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 
 interface AssignResourceToRoleTableProps {
@@ -28,6 +29,8 @@ export const AssignResourceToRoleTable = (
     }: AssignResourceToRoleTableProps) => {
 
     const [searchParams, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -50,7 +53,7 @@ export const AssignResourceToRoleTable = (
                 </Table.Header>
 
                 <Table.Body>
-                    {isAssignedResources.map((resource: IResourceForList) => (
+                    {loading ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
                         <Table.Row key={resource.id}>
                             <Table.HeaderCell scope="row">{resource.resourceName} </Table.HeaderCell>
                             <Table.DataCell align={"center"}>
diff --git a/app/components/role/MemberTable.tsx b/app/components/role/MemberTable.tsx
index 085c299..3af3e39 100644
--- a/app/components/role/MemberTable.tsx
+++ b/app/components/role/MemberTable.tsx
@@ -1,8 +1,9 @@
 import {Pagination, Select, Table} from "@navikt/ds-react";
-import {Form, useSearchParams} from "@remix-run/react";
+import {Form, useNavigation, useSearchParams} from "@remix-run/react";
 import type {IMemberPage} from "~/data/types";
 import React from "react";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 
 interface MembersTableProps {
@@ -13,6 +14,8 @@ interface MembersTableProps {
 export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
 
     const [, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -32,7 +35,7 @@ export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {memberPage.members.map((member) => (
+                    {loading ? <TableSkeleton columns={2} height={30}/> : memberPage.members.map((member) => (
                         <Table.Row key={member.id}>
                             <Table.HeaderCell scope="row">{member.firstName} {member.lastName}</Table.HeaderCell>
                             <Table.DataCell>{member.userType}</Table.DataCell>
diff --git a/app/components/role/RoleTable.tsx b/app/components/role/RoleTable.tsx
index 56ea17f..f42d5e8 100644
--- a/app/components/role/RoleTable.tsx
+++ b/app/components/role/RoleTable.tsx
@@ -1,9 +1,10 @@
 import {Button, Pagination, Select, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useSearchParams} from "@remix-run/react";
+import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import type {IRoleList} from "~/data/types";
 import React from "react";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface RoleTableProps {
     rolePage: IRoleList
@@ -13,6 +14,8 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
 
     const navigate = useNavigate();
     const [, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -34,37 +37,38 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {rolePage.roles.map((role) => (
-                        <Table.Row key={role.id}>
-                            <Table.DataCell scope="row">{role.roleName}</Table.DataCell>
-                            <Table.DataCell>{role.organisationUnitName}</Table.DataCell>
-                            <Table.DataCell>{role.roleType}</Table.DataCell>
-                            <Table.DataCell align="right">
-                                <Button
-                                    id={`roleInfoButton-${role.id}`}
-                                    icon={
-                                        <InformationSquareIcon
-                                            title="Informasjonsikon"
-                                            fontSize="1.5rem"
-                                        />
-                                    }
-                                    iconPosition={"right"}
-                                    onClick={() =>
-                                        navigate(`/roles/${role.id}/members`)
-                                    }
-                                    // id={`resource-${i}`}
-                                    variant={"secondary"}
-                                    role="link"
-                                >
-                                    Se info
-                                </Button>
-                            </Table.DataCell>
-                        </Table.Row>
-                    ))}
+                    {loading ? <TableSkeleton/> :
+                        rolePage.roles.map((role) => (
+                            <Table.Row key={role.id}>
+                                <Table.DataCell scope="row">{role.roleName}</Table.DataCell>
+                                <Table.DataCell>{role.organisationUnitName}</Table.DataCell>
+                                <Table.DataCell>{role.roleType}</Table.DataCell>
+                                <Table.DataCell align="right">
+                                    <Button
+                                        id={`roleInfoButton-${role.id}`}
+                                        icon={
+                                            <InformationSquareIcon
+                                                title="Informasjonsikon"
+                                                fontSize="1.5rem"
+                                            />
+                                        }
+                                        iconPosition={"right"}
+                                        onClick={() =>
+                                            navigate(`/roles/${role.id}/members`)
+                                        }
+                                        // id={`resource-${i}`}
+                                        variant={"secondary"}
+                                        role="link"
+                                    >
+                                        Se info
+                                    </Button>
+                                </Table.DataCell>
+                            </Table.Row>
+                        ))}
                 </Table.Body>
             </Table>
 
-            <Form className={"paginationWrapper"}>
+             <Form className={"paginationWrapper"}>
                 <Select
                     id={"select-number-of-rows"}
                     style={{marginBottom: '1.5rem'}}
diff --git a/app/components/user/AssignResourceToUserTable.tsx b/app/components/user/AssignResourceToUserTable.tsx
index b655a32..6770797 100644
--- a/app/components/user/AssignResourceToUserTable.tsx
+++ b/app/components/user/AssignResourceToUserTable.tsx
@@ -1,10 +1,11 @@
 import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
 import type {IResource, IResourceAssignment, IResourceForList} from "~/data/types";
 import React from "react";
-import {Outlet, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
 import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 
 interface AssignResourceToUserTableProps {
@@ -27,6 +28,8 @@ export const AssignResourceToUserTable = ({
 }: AssignResourceToUserTableProps) => {
 
     const [searchParams, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -47,7 +50,7 @@ export const AssignResourceToUserTable = ({
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {isAssignedResources.map((resource: IResourceForList) => (
+                    {loading ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell scope="row">{resource.resourceName} </Table.DataCell>
                             <Table.DataCell align={"center"}>
diff --git a/app/components/user/AssignmentsForUserTable.tsx b/app/components/user/AssignmentsForUserTable.tsx
index 486086d..213505c 100644
--- a/app/components/user/AssignmentsForUserTable.tsx
+++ b/app/components/user/AssignmentsForUserTable.tsx
@@ -1,9 +1,10 @@
 import {Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
 import type {IAssignmentPage} from "~/data/types";
-import {Form, Outlet, useParams, useSearchParams} from "@remix-run/react";
+import {Form, Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface AssignmentsForUserTableProps {
     assignmentsForUser: IAssignmentPage
@@ -15,6 +16,8 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As
 
     const [searchParams, setSearchParams] = useSearchParams()
     const params = useParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -38,7 +41,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {assignmentsForUser.resources.map((resource) => (
+                    {loading ? <TableSkeleton columns={5}/> : assignmentsForUser.resources.map((resource) => (
                         <Table.Row key={resource.resourceRef}>
                             <Table.HeaderCell scope="row">{resource.resourceName}</Table.HeaderCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/user/UserTable.tsx b/app/components/user/UserTable.tsx
index e276753..8f5aa98 100644
--- a/app/components/user/UserTable.tsx
+++ b/app/components/user/UserTable.tsx
@@ -1,9 +1,10 @@
 import {Button, Pagination, Select, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useSearchParams} from "@remix-run/react";
+import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import {IUserItem, IUserPage} from "~/data/types";
 import React from "react";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 
 interface UserTableProps {
     userPage: IUserPage
@@ -11,9 +12,10 @@ interface UserTableProps {
 }
 
 export const UserTable = ({userPage, size}: UserTableProps) => {
-
     const navigate = useNavigate();
     const [, setSearchParams] = useSearchParams()
+    const navigation = useNavigation()
+    const loading = isLoading(navigation)
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
@@ -35,7 +37,7 @@ export const UserTable = ({userPage, size}: UserTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {userPage.users.map((user: IUserItem) => (
+                    {loading ? <TableSkeleton /> : userPage.users.map((user: IUserItem) => (
                         <Table.Row key={user.id} id={`row-${user.fullName.replace(/\s+/g, '-')}`}>
                             <Table.DataCell>{user.fullName}</Table.DataCell>
                             <Table.DataCell>{user.organisationUnitName}</Table.DataCell>

From dbe84ff2dff93b77ba8adcf820b25c07ad811064 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Tue, 1 Oct 2024 15:39:02 +0200
Subject: [PATCH 08/12] Extract duplicate pagination component

---
 .../assignment/AssignedRolesTable.tsx         | 43 ++-------------
 .../assignment/AssignedUsersTable.tsx         | 44 ++-------------
 .../assignment/NewAssignmentRoleTable.tsx     | 43 ++-------------
 .../assignment/NewAssignmentUserTable.tsx     | 45 +++-------------
 .../common/Table/TablePagination.tsx          | 54 +++++++++++++++++++
 .../resource-admin/ResourceAdminTable.tsx     | 43 ++-------------
 .../ResourceModuleAdminUsersTable.tsx         | 48 ++++-------------
 .../administer/RoleAssignmentTable.tsx        | 50 ++++-------------
 app/components/resource/ResourceTable.tsx     | 44 ++-------------
 .../role/AssignResourceToRoleTable.tsx        | 44 ++-------------
 .../role/AssignmentsForRoleTable.tsx          | 47 +++-------------
 app/components/role/MemberTable.tsx           | 45 ++--------------
 app/components/role/RoleTable.tsx             | 45 ++--------------
 .../user/AssignResourceToUserTable.tsx        | 44 ++-------------
 .../user/AssignmentsForUserTable.tsx          | 46 +++-------------
 app/components/user/UserTable.tsx             | 45 ++--------------
 16 files changed, 144 insertions(+), 586 deletions(-)
 create mode 100644 app/components/common/Table/TablePagination.tsx

diff --git a/app/components/assignment/AssignedRolesTable.tsx b/app/components/assignment/AssignedRolesTable.tsx
index 781381f..67f9a5c 100644
--- a/app/components/assignment/AssignedRolesTable.tsx
+++ b/app/components/assignment/AssignedRolesTable.tsx
@@ -1,10 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, VStack} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, VStack} from "@navikt/ds-react";
 import type {IAssignedRoles} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 export const AssignedRolesTable: any = (props: {
     assignedRoles: IAssignedRoles,
@@ -14,19 +15,11 @@ export const AssignedRolesTable: any = (props: {
     basePath?: string
 }) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <VStack gap="8">
@@ -67,33 +60,7 @@ export const AssignedRolesTable: any = (props: {
                 </Table>
             </VStack>
 
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={props.size ? props.size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={props.assignedRoles.currentPage + 1} //Number(props.page) ? Number(props.page) : 1
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={props.assignedRoles.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={props.assignedRoles.currentPage} totalPages={props.assignedRoles.totalPages} size={props.size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/assignment/AssignedUsersTable.tsx b/app/components/assignment/AssignedUsersTable.tsx
index 0b4983a..046108a 100644
--- a/app/components/assignment/AssignedUsersTable.tsx
+++ b/app/components/assignment/AssignedUsersTable.tsx
@@ -1,10 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, Tag, VStack} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, Tag, VStack} from "@navikt/ds-react";
 import type {IAssignedUsers} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface AssignedUsersTableProps {
     assignedUsers: IAssignedUsers, size: string
@@ -13,19 +14,11 @@ interface AssignedUsersTableProps {
 
 export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUsersTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <VStack gap="8">
@@ -75,34 +68,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
                 </Table>
             </VStack>
 
-            <Box className={"paginationWrapper"}>
-                <Select
-                    id="pagination-select"
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : '25'}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={assignedUsers.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={assignedUsers.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={assignedUsers.currentPage} totalPages={assignedUsers.totalPages} size={size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx
index 0cbaf7d..76c4ef9 100644
--- a/app/components/assignment/NewAssignmentRoleTable.tsx
+++ b/app/components/assignment/NewAssignmentRoleTable.tsx
@@ -1,10 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
+import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react";
 import type {IRole} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 export const AssignRoleTable: any = (props: {
     isAssignedRoles: IRole[],
@@ -16,18 +17,10 @@ export const AssignRoleTable: any = (props: {
     basePath?: string
 }) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <Heading className={"heading"} size={"large"} level={"3"}>Grupper</Heading>
@@ -69,33 +62,7 @@ export const AssignRoleTable: any = (props: {
                     ))}
                 </Table.Body>
             </Table>
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={props.size ? props.size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={props.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={props.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={props.currentPage} totalPages={props.totalPages} size={props.size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/assignment/NewAssignmentUserTable.tsx b/app/components/assignment/NewAssignmentUserTable.tsx
index 74006f0..a36d7fc 100644
--- a/app/components/assignment/NewAssignmentUserTable.tsx
+++ b/app/components/assignment/NewAssignmentUserTable.tsx
@@ -1,10 +1,11 @@
-import {Box, Button, Heading, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
-import type {IUser, IUserItem} from "~/data/types";
+import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react";
+import type {IUserItem} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 
 interface AssignUserTableProps {
@@ -23,18 +24,10 @@ export const AssignUserTable = ({
     currentPage,
     basePath,
 }: AssignUserTableProps) => {
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <Heading className={"heading"} size={"large"} level={"3"}>Brukere</Heading>
@@ -80,33 +73,7 @@ export const AssignUserTable = ({
                     ))}
                 </Table.Body>
             </Table>
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={currentPage} totalPages={totalPages} size={size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/common/Table/TablePagination.tsx b/app/components/common/Table/TablePagination.tsx
new file mode 100644
index 0000000..278633f
--- /dev/null
+++ b/app/components/common/Table/TablePagination.tsx
@@ -0,0 +1,54 @@
+import {Form, useSearchParams} from "@remix-run/react";
+import {Select, Pagination as AkselPagination} from "@navikt/ds-react";
+import React from "react";
+import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+
+type PaginationProps = {
+    currentPage: number
+    totalPages?: number
+    size?:  string | number | readonly string[] | undefined
+}
+
+export const TablePagination = ({totalPages = 1, size = 25, currentPage}: PaginationProps) => {
+    const [, setSearchParams] = useSearchParams()
+
+    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
+        setSizeCookieClientSide(event.target.value)
+        setSearchParams(searchParams => {
+            searchParams.set("page", "0")
+            return searchParams;
+        })
+    }
+
+    return (
+        <Form className={"paginationWrapper"}>
+            ny
+            <Select
+                id={"select-number-of-rows"}
+                style={{marginBottom: '1.5rem'}}
+                label="Rader per side"
+                size="small"
+                onChange={handleChangeRowsPerPage}
+                defaultValue={size}
+            >
+                <option value={5}>5</option>
+                <option value={10}>10</option>
+                <option value={25}>25</option>
+                <option value={50}>50</option>
+            </Select>
+            <AkselPagination
+                id="pagination"
+                page={currentPage + 1}
+                onPageChange={(e) => {
+                    setSearchParams(searchParams => {
+                        searchParams.set("page", (e - 1).toString());
+                        return searchParams;
+                    })
+                }}
+                count={totalPages}
+                size="small"
+                prevNextTexts
+            />
+        </Form>
+    )
+}
\ No newline at end of file
diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx
index e18d769..e559ddc 100644
--- a/app/components/resource-admin/ResourceAdminTable.tsx
+++ b/app/components/resource-admin/ResourceAdminTable.tsx
@@ -1,11 +1,12 @@
-import {Button, Dropdown, HStack, Link, Pagination, Select, Table} from "@navikt/ds-react";
+import {Button, Dropdown, HStack, Link, Table} from "@navikt/ds-react";
 import {FunnelIcon, InformationSquareIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons";
-import {Form, Outlet, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import type {IResourceAdminList} from "~/data/types";
 import React from "react";
-import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
 import {StatusTag} from "~/components/resource-admin/StatusTag";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface ResourceTableProps {
     resourcePage: IResourceAdminList,
@@ -31,14 +32,6 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
         });
     };
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Outlet/>
@@ -132,33 +125,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                     ))}
                 </Table.Body>
             </Table>
-            <Form className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 10}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={resourcePage.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={resourcePage.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={resourcePage.currentPage} totalPages={resourcePage.totalPages} size={size ?? 10}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
index 4c3ac99..10a69df 100644
--- a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
+++ b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
@@ -1,5 +1,5 @@
-import {Button, Pagination, Select, Table} from "@navikt/ds-react";
-import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {Button, Table} from "@navikt/ds-react";
+import {useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {
     IResourceModuleAccessRole,
@@ -7,8 +7,9 @@ import {
     IResourceModuleUsersPage
 } from "~/data/resourceModuleAdmin/types";
 import {IUnitItem} from "~/data/types";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface ResourceModuleAdminUsersTableI {
     usersPage: IResourceModuleUsersPage
@@ -19,17 +20,9 @@ interface ResourceModuleAdminUsersTableI {
 const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTableI) => {
     const navigate = useNavigate()
     const navigation = useNavigation()
-    const [params, setSearchParams] = useSearchParams()
+    const [params] = useSearchParams()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div className={"table-toolbar-pagination-container"}>
             <Table className={"users-table"} id="users-table">
@@ -58,32 +51,11 @@ const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTabl
                 </Table.Body>
             </Table>
             {usersPage.users.length > 0 &&
-                <Form className={"pagination-wrapper"}>
-                    <Select
-                        label="Rader per side"
-                        size="small"
-                        onChange={handleChangeRowsPerPage}
-                        defaultValue={params.get("size") ? Number(params.get("size")) : 25}
-                    >
-                        <option value={5}>5</option>
-                        <option value={10}>10</option>
-                        <option value={25}>25</option>
-                        <option value={50}>50</option>
-                    </Select>
-                    <Pagination
-                        id="pagination"
-                        page={usersPage.currentPage + 1}
-                        onPageChange={(e) => {
-                            setSearchParams(searchParams => {
-                                searchParams.set("page", (e - 1).toString());
-                                return searchParams;
-                            })
-                        }}
-                        count={usersPage.totalPages}
-                        size="small"
-                        prevNextTexts
-                    />
-                </Form>
+                <TablePagination
+                    currentPage={usersPage.currentPage}
+                    totalPages={usersPage.totalPages}
+                    size={params.get("size") ?? 25}
+                />
             }
         </div>
     )
diff --git a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
index 9efc2b6..2057aae 100644
--- a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
+++ b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
@@ -1,6 +1,6 @@
-import {Alert, Button, Pagination, Select, Table} from "@navikt/ds-react";
+import {Alert, Table} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {Form, useNavigation, useSearchParams} from "@remix-run/react";
+import {useNavigation, useSearchParams} from "@remix-run/react";
 import {
     IResourceModuleAccessRole,
     IResourceModuleOrgUnitDetail,
@@ -8,22 +8,23 @@ import {
 } from "~/data/resourceModuleAdmin/types";
 import {TrashIcon} from "@navikt/aksel-icons";
 import DeleteOrgUnitInAssignment from "~/components/resource-module-admin/administer/DeleteOrgUnitInAssignment";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface RoleAssignmentTableProps {
     selectedRole: IResourceModuleAccessRole
     userAssignmentsPaginated: IResourceModuleUserAssignmentsPaginated
 }
 
-const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssignmentTableProps) => {
+const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}: RoleAssignmentTableProps) => {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
     const [orgUnit, setOrgUnit] = useState<IResourceModuleOrgUnitDetail | undefined>()
     const [scopeId, setScopeId] = useState("")
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const [params, setSearchParams] = useSearchParams()
+    const [params] = useSearchParams()
 
     const toggleDeleteOrgUnitModal = (scopeId: number, orgUnit: IResourceModuleOrgUnitDetail) => {
         setOrgUnit(orgUnit)
@@ -31,14 +32,6 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign
         setIsDeleteModalOpen(true)
     }
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div className={"table-toolbar-pagination-container"}>
             {isDeleteModalOpen && orgUnit && (
@@ -114,32 +107,11 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}:RoleAssign
 
 
             {userAssignmentsPaginated?.accessRoles.length > 0 &&
-                <Form className={"pagination-wrapper"}>
-                    <Select
-                        label="Rader per side"
-                        size="small"
-                        onChange={handleChangeRowsPerPage}
-                        defaultValue={params.get("size") ? Number(params.get("size")) : 10}
-                    >
-                        <option value={5}>5</option>
-                        <option value={10}>10</option>
-                        <option value={25}>25</option>
-                        <option value={50}>50</option>
-                    </Select>
-                    <Pagination
-                        id="pagination"
-                        page={userAssignmentsPaginated.currentPage + 1}
-                        onPageChange={(e) => {
-                            setSearchParams(searchParams => {
-                                searchParams.set("page", (e - 1).toString());
-                                return searchParams;
-                            })
-                        }}
-                        count={userAssignmentsPaginated.totalPages}
-                        size="small"
-                        prevNextTexts
-                    />
-                </Form>
+                <TablePagination
+                    currentPage={userAssignmentsPaginated.currentPage}
+                    totalPages={userAssignmentsPaginated.totalPages}
+                    size={Number(params.get("size")) ?? 10}
+                />
             }
         </div>
     )
diff --git a/app/components/resource/ResourceTable.tsx b/app/components/resource/ResourceTable.tsx
index ce1c821..e1e60e2 100644
--- a/app/components/resource/ResourceTable.tsx
+++ b/app/components/resource/ResourceTable.tsx
@@ -1,10 +1,11 @@
-import {Button, Pagination, Select, Table} from "@navikt/ds-react";
+import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {useNavigate, useNavigation} from "@remix-run/react";
 import type {IResourceList} from "~/data/types";
 import React from "react";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface ResourceTableProps {
     resourcePage: IResourceList
@@ -14,18 +15,9 @@ interface ResourceTableProps {
 export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
 
     const navigate = useNavigate();
-    const [, setSearchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Table id="resources-table">
@@ -64,33 +56,7 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
                     ))}
                 </Table.Body>
             </Table>
-            <Form className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={resourcePage.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={resourcePage.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={resourcePage.currentPage} totalPages={resourcePage.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/role/AssignResourceToRoleTable.tsx b/app/components/role/AssignResourceToRoleTable.tsx
index 9548f03..af5dca3 100644
--- a/app/components/role/AssignResourceToRoleTable.tsx
+++ b/app/components/role/AssignResourceToRoleTable.tsx
@@ -1,11 +1,11 @@
-import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
+import {Button, Link, Table, Tag} from "@navikt/ds-react";
 import type {IResourceForList} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
-
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface AssignResourceToRoleTableProps {
     isAssignedResources: IResourceForList[],
@@ -28,18 +28,10 @@ export const AssignResourceToRoleTable = (
         basePath
     }: AssignResourceToRoleTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <Outlet/>
@@ -80,33 +72,7 @@ export const AssignResourceToRoleTable = (
                 </Table.Body>
             </Table>
 
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={currentPage} totalPages={totalPages} size={size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/role/AssignmentsForRoleTable.tsx b/app/components/role/AssignmentsForRoleTable.tsx
index 95c542d..e35999a 100644
--- a/app/components/role/AssignmentsForRoleTable.tsx
+++ b/app/components/role/AssignmentsForRoleTable.tsx
@@ -1,9 +1,10 @@
-import {Button, Link, Pagination, Select, Table} from "@navikt/ds-react";
-import type {IAssignmentPage, IResource, IResourceAssignment} from "~/data/types";
-import {Form, Outlet, useParams, useSearchParams} from "@remix-run/react";
+import {Button, Link, Table} from "@navikt/ds-react";
+import type {IAssignmentPage, IResourceAssignment} from "~/data/types";
+import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 
 interface AssignmentsForRoleTableProps {
@@ -18,17 +19,9 @@ export const AssignmentsForRoleTable  = ({
     basePath
 }: AssignmentsForRoleTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Outlet/>
@@ -67,33 +60,7 @@ export const AssignmentsForRoleTable  = ({
                 </Table.Body>
             </Table>
 
-            <Form className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={assignmentsForRole.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={assignmentsForRole.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={assignmentsForRole.currentPage} totalPages={assignmentsForRole.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/role/MemberTable.tsx b/app/components/role/MemberTable.tsx
index 3af3e39..584f58b 100644
--- a/app/components/role/MemberTable.tsx
+++ b/app/components/role/MemberTable.tsx
@@ -1,9 +1,10 @@
-import {Pagination, Select, Table} from "@navikt/ds-react";
-import {Form, useNavigation, useSearchParams} from "@remix-run/react";
+import {Table} from "@navikt/ds-react";
+import {useNavigation} from "@remix-run/react";
 import type {IMemberPage} from "~/data/types";
 import React from "react";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 
 interface MembersTableProps {
@@ -13,18 +14,9 @@ interface MembersTableProps {
 
 export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
 
-    const [, setSearchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Table id={"memberTable"}>
@@ -64,34 +56,7 @@ export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
                 </Table.Body>
             </Table>
 
-            <Form className={"paginationWrapper"}>
-                <Select
-                    id={"selectNumberOfRows"}
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={memberPage.currentPage + 1} //Number(props.page) ? Number(props.page) : 1
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={memberPage.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={memberPage.currentPage} totalPages={memberPage.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/role/RoleTable.tsx b/app/components/role/RoleTable.tsx
index f42d5e8..ec6bafc 100644
--- a/app/components/role/RoleTable.tsx
+++ b/app/components/role/RoleTable.tsx
@@ -1,10 +1,11 @@
-import {Button, Pagination, Select, Table} from "@navikt/ds-react";
+import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {useNavigate, useNavigation} from "@remix-run/react";
 import type {IRoleList} from "~/data/types";
 import React from "react";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface RoleTableProps {
     rolePage: IRoleList
@@ -13,18 +14,9 @@ interface RoleTableProps {
 export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
 
     const navigate = useNavigate();
-    const [, setSearchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Table id={"role-table"}>
@@ -68,34 +60,7 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
                 </Table.Body>
             </Table>
 
-             <Form className={"paginationWrapper"}>
-                <Select
-                    id={"select-number-of-rows"}
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={rolePage.currentPage + 1} //Number(props.page) ? Number(props.page) : 1
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={rolePage.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={rolePage.currentPage} totalPages={rolePage.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/user/AssignResourceToUserTable.tsx b/app/components/user/AssignResourceToUserTable.tsx
index 6770797..d992a4e 100644
--- a/app/components/user/AssignResourceToUserTable.tsx
+++ b/app/components/user/AssignResourceToUserTable.tsx
@@ -1,11 +1,11 @@
-import {Box, Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
-import type {IResource, IResourceAssignment, IResourceForList} from "~/data/types";
+import {Button, Link, Table, Tag} from "@navikt/ds-react";
+import type {IResourceForList} from "~/data/types";
 import React from "react";
 import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
 import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
-import {setSizeCookieClientSide} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 
 interface AssignResourceToUserTableProps {
@@ -27,18 +27,10 @@ export const AssignResourceToUserTable = ({
     basePath
 }: AssignResourceToUserTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <div>
             <Outlet/>
@@ -76,33 +68,7 @@ export const AssignResourceToUserTable = ({
                     ))}
                 </Table.Body>
             </Table>
-            <Box className={"paginationWrapper"}>
-                <Select
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Box>
+            <TablePagination currentPage={currentPage} totalPages={totalPages} size={size}/>
         </div>
     );
 };
\ No newline at end of file
diff --git a/app/components/user/AssignmentsForUserTable.tsx b/app/components/user/AssignmentsForUserTable.tsx
index 213505c..c80afc4 100644
--- a/app/components/user/AssignmentsForUserTable.tsx
+++ b/app/components/user/AssignmentsForUserTable.tsx
@@ -1,10 +1,11 @@
-import {Button, Link, Pagination, Select, Table, Tag} from "@navikt/ds-react";
+import {Button, Link, Table, Tag} from "@navikt/ds-react";
 import type {IAssignmentPage} from "~/data/types";
-import {Form, Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface AssignmentsForUserTableProps {
     assignmentsForUser: IAssignmentPage
@@ -14,19 +15,11 @@ interface AssignmentsForUserTableProps {
 
 export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: AssignmentsForUserTableProps) => {
 
-    const [searchParams, setSearchParams] = useSearchParams()
+    const [searchParams] = useSearchParams()
     const params = useParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Outlet/>
@@ -72,34 +65,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As
                 </Table.Body>
             </Table>
 
-            <Form className={"paginationWrapper"}>
-                <Select
-                    id={"select-number-of-rows"}
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : 25}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={assignmentsForUser.currentPage + 1}
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={assignmentsForUser.totalPages}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={assignmentsForUser.currentPage} totalPages={assignmentsForUser.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/user/UserTable.tsx b/app/components/user/UserTable.tsx
index 8f5aa98..dea5c13 100644
--- a/app/components/user/UserTable.tsx
+++ b/app/components/user/UserTable.tsx
@@ -1,10 +1,11 @@
-import {Button, Pagination, Select, Table} from "@navikt/ds-react";
+import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {Form, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {useNavigate, useNavigation} from "@remix-run/react";
 import {IUserItem, IUserPage} from "~/data/types";
 import React from "react";
-import {isLoading, setSizeCookieClientSide} from "~/components/common/CommonFunctions";
+import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
+import {TablePagination} from "~/components/common/Table/TablePagination";
 
 interface UserTableProps {
     userPage: IUserPage
@@ -13,18 +14,9 @@ interface UserTableProps {
 
 export const UserTable = ({userPage, size}: UserTableProps) => {
     const navigate = useNavigate();
-    const [, setSearchParams] = useSearchParams()
     const navigation = useNavigation()
     const loading = isLoading(navigation)
 
-    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
-        setSizeCookieClientSide(event.target.value)
-        setSearchParams(searchParams => {
-            searchParams.set("page", "0")
-            return searchParams;
-        })
-    }
-
     return (
         <>
             <Table id={"user-table"}>
@@ -67,34 +59,7 @@ export const UserTable = ({userPage, size}: UserTableProps) => {
                 </Table.Body>
             </Table>
 
-            <Form className={"paginationWrapper"}>
-                <Select
-                    id={"select-number-of-rows"}
-                    style={{marginBottom: '1.5rem'}}
-                    label="Rader per side"
-                    size="small"
-                    onChange={handleChangeRowsPerPage}
-                    defaultValue={size ? size : "25"}
-                >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                </Select>
-                <Pagination
-                    id="pagination"
-                    page={userPage.currentPage + 1} //Number(props.page) ? Number(props.page) : 1
-                    onPageChange={(e) => {
-                        setSearchParams(searchParams => {
-                            searchParams.set("page", (e - 1).toString());
-                            return searchParams;
-                        })
-                    }}
-                    count={userPage.totalPages || 1}
-                    size="small"
-                    prevNextTexts
-                />
-            </Form>
+            <TablePagination currentPage={userPage.currentPage} totalPages={userPage.totalPages} size={size}/>
         </>
     );
 };
\ No newline at end of file

From 591c2815aa85d99ec39195c79ead0d535c2690a5 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Wed, 2 Oct 2024 09:28:40 +0200
Subject: [PATCH 09/12] Update tests

---
 app/components/common/Table/TablePagination.tsx | 1 -
 cypress/e2e/ressurser/resource.cy.ts            | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/common/Table/TablePagination.tsx b/app/components/common/Table/TablePagination.tsx
index 278633f..8fb97d3 100644
--- a/app/components/common/Table/TablePagination.tsx
+++ b/app/components/common/Table/TablePagination.tsx
@@ -22,7 +22,6 @@ export const TablePagination = ({totalPages = 1, size = 25, currentPage}: Pagina
 
     return (
         <Form className={"paginationWrapper"}>
-            ny
             <Select
                 id={"select-number-of-rows"}
                 style={{marginBottom: '1.5rem'}}
diff --git a/cypress/e2e/ressurser/resource.cy.ts b/cypress/e2e/ressurser/resource.cy.ts
index 8c78694..a08c66f 100644
--- a/cypress/e2e/ressurser/resource.cy.ts
+++ b/cypress/e2e/ressurser/resource.cy.ts
@@ -50,7 +50,7 @@ describe('Check the resource details page', () => {
 
     it('Pagination (select number of rows in table)', () => {
         cy.get('#pagination').should('be.visible')
-        cy.get('#pagination-select').should('exist').select('5')
+        cy.get('#select-number-of-rows').should('exist').select('5')
         cy.wait(1000)
     });
 

From 57d1bbef0defb7b0d3cf3e52ae5d3209ac5ce0f2 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Wed, 2 Oct 2024 14:30:50 +0200
Subject: [PATCH 10/12] Rewrite helper function to hook and fix loading state
 when fetching

---
 .../assignment/AssignedRolesTable.tsx         |  9 ++++----
 .../assignment/AssignedUsersTable.tsx         | 10 ++++----
 .../assignment/NewAssignmentRoleTable.tsx     |  9 ++++----
 .../assignment/NewAssignmentUserTable.tsx     |  9 ++++----
 app/components/common/CommonFunctions.ts      |  3 ---
 app/components/common/Search.tsx              |  8 +++----
 .../common/Table/TablePagination.tsx          |  3 +--
 app/components/common/customHooks.tsx         | 23 +++++++++++++++++++
 .../resource-admin/ResourceAdminTable.tsx     | 10 ++++----
 .../ResourceModuleAdminUsersTable.tsx         |  9 ++++----
 .../administer/RoleAssignmentTable.tsx        | 10 ++++----
 app/components/resource/ResourceTable.tsx     |  9 ++++----
 .../role/AssignResourceToRoleTable.tsx        | 10 ++++----
 app/components/role/MemberTable.tsx           |  9 +++-----
 app/components/role/RoleTable.tsx             | 10 ++++----
 .../user/AssignResourceToUserTable.tsx        | 11 ++++-----
 .../user/AssignmentsForUserTable.tsx          | 10 ++++----
 app/components/user/UserTable.tsx             |  9 ++++----
 18 files changed, 87 insertions(+), 84 deletions(-)
 create mode 100644 app/components/common/customHooks.tsx

diff --git a/app/components/assignment/AssignedRolesTable.tsx b/app/components/assignment/AssignedRolesTable.tsx
index 67f9a5c..4e54204 100644
--- a/app/components/assignment/AssignedRolesTable.tsx
+++ b/app/components/assignment/AssignedRolesTable.tsx
@@ -1,11 +1,11 @@
 import {Button, Heading, Link, Table, VStack} from "@navikt/ds-react";
 import type {IAssignedRoles} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 export const AssignedRolesTable: any = (props: {
     assignedRoles: IAssignedRoles,
@@ -17,8 +17,7 @@ export const AssignedRolesTable: any = (props: {
 
     const [searchParams] = useSearchParams()
     const params = useParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -37,7 +36,7 @@ export const AssignedRolesTable: any = (props: {
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {loading ? <TableSkeleton /> : props.assignedRoles.roles.map((role) => (
+                        {fetching ? <TableSkeleton /> : props.assignedRoles.roles.map((role) => (
                             <Table.Row key={role.id}>
                                 <Table.HeaderCell scope="row">{role.roleName}</Table.HeaderCell>
                                 <Table.DataCell>{role.roleType}</Table.DataCell>
diff --git a/app/components/assignment/AssignedUsersTable.tsx b/app/components/assignment/AssignedUsersTable.tsx
index 046108a..d95a33e 100644
--- a/app/components/assignment/AssignedUsersTable.tsx
+++ b/app/components/assignment/AssignedUsersTable.tsx
@@ -1,11 +1,12 @@
 import {Button, Heading, Link, Table, Tag, VStack} from "@navikt/ds-react";
 import type {IAssignedUsers} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface AssignedUsersTableProps {
     assignedUsers: IAssignedUsers, size: string
@@ -16,8 +17,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
 
     const [searchParams] = useSearchParams()
     const params = useParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -37,7 +37,7 @@ export const AssignedUsersTable = ({ assignedUsers, size, basePath }: AssignedUs
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {loading ? <TableSkeleton columns={5}/> : assignedUsers.users.map((user) => (
+                        {fetching ? <TableSkeleton columns={5}/> : assignedUsers.users.map((user) => (
                             <Table.Row key={user.assigneeRef}>
                                 <Table.HeaderCell scope="row">{user.assigneeFirstName} {user.assigneeLastName}</Table.HeaderCell>
                                 <Table.DataCell>{user.assigneeUserType}</Table.DataCell>
diff --git a/app/components/assignment/NewAssignmentRoleTable.tsx b/app/components/assignment/NewAssignmentRoleTable.tsx
index 76c4ef9..fe2de3a 100644
--- a/app/components/assignment/NewAssignmentRoleTable.tsx
+++ b/app/components/assignment/NewAssignmentRoleTable.tsx
@@ -1,11 +1,11 @@
 import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react";
 import type {IRole} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 export const AssignRoleTable: any = (props: {
     isAssignedRoles: IRole[],
@@ -18,8 +18,7 @@ export const AssignRoleTable: any = (props: {
 }) => {
 
     const [searchParams] = useSearchParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -35,7 +34,7 @@ export const AssignRoleTable: any = (props: {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton /> : props.isAssignedRoles.map((role: IRole) => (
+                    {fetching ? <TableSkeleton /> : props.isAssignedRoles.map((role: IRole) => (
                         <Table.Row key={role.id}>
                             <Table.HeaderCell scope="row">{role.roleName} </Table.HeaderCell>
                             <Table.DataCell>{role.roleType}</Table.DataCell>
diff --git a/app/components/assignment/NewAssignmentUserTable.tsx b/app/components/assignment/NewAssignmentUserTable.tsx
index a36d7fc..f5d25a9 100644
--- a/app/components/assignment/NewAssignmentUserTable.tsx
+++ b/app/components/assignment/NewAssignmentUserTable.tsx
@@ -1,11 +1,11 @@
 import {Button, Heading, Link, Table, Tag} from "@navikt/ds-react";
 import type {IUserItem} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 
 interface AssignUserTableProps {
@@ -25,8 +25,7 @@ export const AssignUserTable = ({
     basePath,
 }: AssignUserTableProps) => {
     const [searchParams] = useSearchParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -44,7 +43,7 @@ export const AssignUserTable = ({
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton /> : isAssignedUsers.map((user: IUserItem) => (
+                    {fetching ? <TableSkeleton /> : isAssignedUsers.map((user: IUserItem) => (
                         <Table.Row key={user.id}>
                             <Table.DataCell scope="row">{user.fullName} </Table.DataCell>
                             <Table.DataCell>{user.userType}</Table.DataCell>
diff --git a/app/components/common/CommonFunctions.ts b/app/components/common/CommonFunctions.ts
index 0526859..0167661 100644
--- a/app/components/common/CommonFunctions.ts
+++ b/app/components/common/CommonFunctions.ts
@@ -96,6 +96,3 @@ export const getSizeCookieFromRequestHeader = (request: Request): ICookie | null
     }
     return null;
 };
-
-export const isLoading = ({location}: Navigation) =>
-    location && new URLSearchParams(location.search).size > 0;
diff --git a/app/components/common/Search.tsx b/app/components/common/Search.tsx
index 2978e1c..ca467a2 100644
--- a/app/components/common/Search.tsx
+++ b/app/components/common/Search.tsx
@@ -1,11 +1,12 @@
 import {Search as AkselSearch} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {Form, useNavigation, useSearchParams} from "@remix-run/react";
+import {Form, useSearchParams} from "@remix-run/react";
 import {
     filterResetPageParam,
     handleClearSearchFieldString,
     handleSearchFieldString
 } from "~/components/common/CommonFunctions";
+import {useLoadingState} from "~/components/common/customHooks";
 
 type SearchInputProps = {
     label: string
@@ -15,10 +16,7 @@ type SearchInputProps = {
 export const Search = ({label, id}: SearchInputProps) => {
     const [searchString, setSearchString] = useState("")
     const [searchParams, setSearchParams] = useSearchParams()
-
-    const navigation = useNavigation()
-    const searching = navigation.location && new URLSearchParams(navigation.location.search).has("search");
-
+    const {searching} = useLoadingState()
     const pageParam = searchParams.get("page")
 
     return (
diff --git a/app/components/common/Table/TablePagination.tsx b/app/components/common/Table/TablePagination.tsx
index 8fb97d3..6ee4fab 100644
--- a/app/components/common/Table/TablePagination.tsx
+++ b/app/components/common/Table/TablePagination.tsx
@@ -11,7 +11,6 @@ type PaginationProps = {
 
 export const TablePagination = ({totalPages = 1, size = 25, currentPage}: PaginationProps) => {
     const [, setSearchParams] = useSearchParams()
-
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLSelectElement | HTMLOptionElement>) => {
         setSizeCookieClientSide(event.target.value)
         setSearchParams(searchParams => {
@@ -44,7 +43,7 @@ export const TablePagination = ({totalPages = 1, size = 25, currentPage}: Pagina
                         return searchParams;
                     })
                 }}
-                count={totalPages}
+                count={Math.max(totalPages, 1)}
                 size="small"
                 prevNextTexts
             />
diff --git a/app/components/common/customHooks.tsx b/app/components/common/customHooks.tsx
new file mode 100644
index 0000000..7c2f8e3
--- /dev/null
+++ b/app/components/common/customHooks.tsx
@@ -0,0 +1,23 @@
+import {useMemo} from 'react';
+import {useLocation, useNavigation} from "@remix-run/react";
+
+export const useLoadingState = () => {
+    const navigation = useNavigation()
+    const location = useLocation()
+
+    const loading = useMemo(() =>
+            navigation.state === "loading",
+        [navigation.state])
+
+    const fetching = useMemo(() =>
+            navigation.state === "loading" &&
+            navigation.location?.pathname.endsWith(location.pathname) &&
+            new URLSearchParams(navigation.location?.search).toString() !== new URLSearchParams(location.search).toString(),
+        [location, navigation])
+
+    const searching = useMemo(() =>
+            navigation.state === "loading" && new URLSearchParams(navigation.location?.search).has("search"),
+        [navigation.state, navigation.location])
+
+    return {loading, fetching, searching};
+}
diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx
index e559ddc..43df722 100644
--- a/app/components/resource-admin/ResourceAdminTable.tsx
+++ b/app/components/resource-admin/ResourceAdminTable.tsx
@@ -1,12 +1,13 @@
 import {Button, Dropdown, HStack, Link, Table} from "@navikt/ds-react";
 import {FunnelIcon, InformationSquareIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons";
-import {Outlet, useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useNavigate, useSearchParams} from "@remix-run/react";
 import type {IResourceAdminList} from "~/data/types";
 import React from "react";
-import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
 import {StatusTag} from "~/components/resource-admin/StatusTag";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface ResourceTableProps {
     resourcePage: IResourceAdminList,
@@ -18,8 +19,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
 
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     const setStatusFilter = (event: string) => {
         setSearchParams(searchParams => {
@@ -74,7 +74,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={5} /> : resourcePage.resources.map((resource) => (
+                    {fetching ? <TableSkeleton columns={5} /> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell>{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
index 10a69df..837ffc0 100644
--- a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
+++ b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
@@ -1,5 +1,5 @@
 import {Button, Table} from "@navikt/ds-react";
-import {useNavigate, useNavigation, useSearchParams} from "@remix-run/react";
+import {useNavigate, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {
     IResourceModuleAccessRole,
@@ -7,9 +7,9 @@ import {
     IResourceModuleUsersPage
 } from "~/data/resourceModuleAdmin/types";
 import {IUnitItem} from "~/data/types";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface ResourceModuleAdminUsersTableI {
     usersPage: IResourceModuleUsersPage
@@ -19,9 +19,8 @@ interface ResourceModuleAdminUsersTableI {
 
 const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTableI) => {
     const navigate = useNavigate()
-    const navigation = useNavigation()
     const [params] = useSearchParams()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div className={"table-toolbar-pagination-container"}>
@@ -34,7 +33,7 @@ const ResourceModuleAdminUsersTable = ({usersPage}: ResourceModuleAdminUsersTabl
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ?
+                    {fetching ?
                         <TableSkeleton columns={3}/> : usersPage.users.map((user: IResourceModuleUser, index) => {
                             return (
                                 <Table.Row key={index + user.userName}>
diff --git a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
index 2057aae..3a1700f 100644
--- a/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
+++ b/app/components/resource-module-admin/administer/RoleAssignmentTable.tsx
@@ -1,6 +1,6 @@
 import {Alert, Table} from "@navikt/ds-react";
 import React, {useState} from "react";
-import {useNavigation, useSearchParams} from "@remix-run/react";
+import {useSearchParams} from "@remix-run/react";
 import {
     IResourceModuleAccessRole,
     IResourceModuleOrgUnitDetail,
@@ -8,9 +8,9 @@ import {
 } from "~/data/resourceModuleAdmin/types";
 import {TrashIcon} from "@navikt/aksel-icons";
 import DeleteOrgUnitInAssignment from "~/components/resource-module-admin/administer/DeleteOrgUnitInAssignment";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface RoleAssignmentTableProps {
     selectedRole: IResourceModuleAccessRole
@@ -21,9 +21,7 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}: RoleAssig
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
     const [orgUnit, setOrgUnit] = useState<IResourceModuleOrgUnitDetail | undefined>()
     const [scopeId, setScopeId] = useState("")
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
-
+    const {fetching} = useLoadingState()
     const [params] = useSearchParams()
 
     const toggleDeleteOrgUnitModal = (scopeId: number, orgUnit: IResourceModuleOrgUnitDetail) => {
@@ -62,7 +60,7 @@ const RoleAssignmentTable = ({selectedRole, userAssignmentsPaginated}: RoleAssig
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={selectedRole.accessRoleId === "" ? 3 : 2} height={30} /> :userAssignmentsPaginated?.accessRoles.length !== 0 ? (
+                    {fetching ? <TableSkeleton columns={selectedRole.accessRoleId === "" ? 3 : 2} height={30} /> :userAssignmentsPaginated?.accessRoles.length !== 0 ? (
                         userAssignmentsPaginated?.accessRoles.map((scope) =>
                             scope.orgUnits.map((orgUnit) => (
                                 <Table.Row
diff --git a/app/components/resource/ResourceTable.tsx b/app/components/resource/ResourceTable.tsx
index e1e60e2..37bbf1a 100644
--- a/app/components/resource/ResourceTable.tsx
+++ b/app/components/resource/ResourceTable.tsx
@@ -1,11 +1,11 @@
 import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate, useNavigation} from "@remix-run/react";
+import {useNavigate} from "@remix-run/react";
 import type {IResourceList} from "~/data/types";
 import React from "react";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface ResourceTableProps {
     resourcePage: IResourceList
@@ -15,8 +15,7 @@ interface ResourceTableProps {
 export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
 
     const navigate = useNavigate();
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <>
@@ -29,7 +28,7 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton  columns={3}/> : resourcePage.resources.map((resource) => (
+                    {fetching ? <TableSkeleton  columns={3}/> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell scope="row">{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/role/AssignResourceToRoleTable.tsx b/app/components/role/AssignResourceToRoleTable.tsx
index af5dca3..645ae61 100644
--- a/app/components/role/AssignResourceToRoleTable.tsx
+++ b/app/components/role/AssignResourceToRoleTable.tsx
@@ -1,11 +1,12 @@
 import {Button, Link, Table, Tag} from "@navikt/ds-react";
 import type {IResourceForList} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface AssignResourceToRoleTableProps {
     isAssignedResources: IResourceForList[],
@@ -29,8 +30,7 @@ export const AssignResourceToRoleTable = (
     }: AssignResourceToRoleTableProps) => {
 
     const [searchParams] = useSearchParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -45,7 +45,7 @@ export const AssignResourceToRoleTable = (
                 </Table.Header>
 
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
+                    {fetching ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
                         <Table.Row key={resource.id}>
                             <Table.HeaderCell scope="row">{resource.resourceName} </Table.HeaderCell>
                             <Table.DataCell align={"center"}>
diff --git a/app/components/role/MemberTable.tsx b/app/components/role/MemberTable.tsx
index 584f58b..abf4cb9 100644
--- a/app/components/role/MemberTable.tsx
+++ b/app/components/role/MemberTable.tsx
@@ -1,10 +1,9 @@
 import {Table} from "@navikt/ds-react";
-import {useNavigation} from "@remix-run/react";
 import type {IMemberPage} from "~/data/types";
 import React from "react";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 
 interface MembersTableProps {
@@ -13,9 +12,7 @@ interface MembersTableProps {
 }
 
 export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
-
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <>
@@ -27,7 +24,7 @@ export const MemberTable = ({ memberPage, size }: MembersTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={2} height={30}/> : memberPage.members.map((member) => (
+                    {fetching ? <TableSkeleton columns={2} height={30}/> : memberPage.members.map((member) => (
                         <Table.Row key={member.id}>
                             <Table.HeaderCell scope="row">{member.firstName} {member.lastName}</Table.HeaderCell>
                             <Table.DataCell>{member.userType}</Table.DataCell>
diff --git a/app/components/role/RoleTable.tsx b/app/components/role/RoleTable.tsx
index ec6bafc..bc0a2a7 100644
--- a/app/components/role/RoleTable.tsx
+++ b/app/components/role/RoleTable.tsx
@@ -1,21 +1,19 @@
 import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate, useNavigation} from "@remix-run/react";
+import {useNavigate} from "@remix-run/react";
 import type {IRoleList} from "~/data/types";
 import React from "react";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface RoleTableProps {
     rolePage: IRoleList
     size: string
 }
 export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
-
     const navigate = useNavigate();
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <>
@@ -29,7 +27,7 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton/> :
+                    {fetching ? <TableSkeleton/> :
                         rolePage.roles.map((role) => (
                             <Table.Row key={role.id}>
                                 <Table.DataCell scope="row">{role.roleName}</Table.DataCell>
diff --git a/app/components/user/AssignResourceToUserTable.tsx b/app/components/user/AssignResourceToUserTable.tsx
index d992a4e..cfc85f5 100644
--- a/app/components/user/AssignResourceToUserTable.tsx
+++ b/app/components/user/AssignResourceToUserTable.tsx
@@ -1,12 +1,12 @@
 import {Button, Link, Table, Tag} from "@navikt/ds-react";
 import type {IResourceForList} from "~/data/types";
 import React from "react";
-import {Outlet, useNavigation, useSearchParams} from "@remix-run/react";
+import {Outlet, useSearchParams} from "@remix-run/react";
 import {PlusIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
-
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface AssignResourceToUserTableProps {
     isAssignedResources: IResourceForList[]
@@ -28,8 +28,7 @@ export const AssignResourceToUserTable = ({
 }: AssignResourceToUserTableProps) => {
 
     const [searchParams] = useSearchParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <div>
@@ -42,7 +41,7 @@ export const AssignResourceToUserTable = ({
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
+                    {fetching ? <TableSkeleton columns={2}/> : isAssignedResources.map((resource: IResourceForList) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell scope="row">{resource.resourceName} </Table.DataCell>
                             <Table.DataCell align={"center"}>
diff --git a/app/components/user/AssignmentsForUserTable.tsx b/app/components/user/AssignmentsForUserTable.tsx
index c80afc4..e950c84 100644
--- a/app/components/user/AssignmentsForUserTable.tsx
+++ b/app/components/user/AssignmentsForUserTable.tsx
@@ -1,11 +1,12 @@
 import {Button, Link, Table, Tag} from "@navikt/ds-react";
 import type {IAssignmentPage} from "~/data/types";
-import {Outlet, useNavigation, useParams, useSearchParams} from "@remix-run/react";
+import {Outlet, useParams, useSearchParams} from "@remix-run/react";
 import React from "react";
 import {TrashIcon} from "@navikt/aksel-icons";
-import {isLoading, prepareQueryParams} from "~/components/common/CommonFunctions";
+import {prepareQueryParams} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface AssignmentsForUserTableProps {
     assignmentsForUser: IAssignmentPage
@@ -17,8 +18,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As
 
     const [searchParams] = useSearchParams()
     const params = useParams()
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <>
@@ -34,7 +34,7 @@ export const AssignmentsForUserTable = ({assignmentsForUser, size, basePath}: As
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton columns={5}/> : assignmentsForUser.resources.map((resource) => (
+                    {fetching ? <TableSkeleton columns={5}/> : assignmentsForUser.resources.map((resource) => (
                         <Table.Row key={resource.resourceRef}>
                             <Table.HeaderCell scope="row">{resource.resourceName}</Table.HeaderCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
diff --git a/app/components/user/UserTable.tsx b/app/components/user/UserTable.tsx
index dea5c13..117f4b8 100644
--- a/app/components/user/UserTable.tsx
+++ b/app/components/user/UserTable.tsx
@@ -1,11 +1,11 @@
 import {Button, Table} from "@navikt/ds-react";
 import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate, useNavigation} from "@remix-run/react";
+import {useNavigate} from "@remix-run/react";
 import {IUserItem, IUserPage} from "~/data/types";
 import React from "react";
-import {isLoading} from "~/components/common/CommonFunctions";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
+import {useLoadingState} from "~/components/common/customHooks";
 
 interface UserTableProps {
     userPage: IUserPage
@@ -14,8 +14,7 @@ interface UserTableProps {
 
 export const UserTable = ({userPage, size}: UserTableProps) => {
     const navigate = useNavigate();
-    const navigation = useNavigation()
-    const loading = isLoading(navigation)
+    const {fetching} = useLoadingState()
 
     return (
         <>
@@ -29,7 +28,7 @@ export const UserTable = ({userPage, size}: UserTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {loading ? <TableSkeleton /> : userPage.users.map((user: IUserItem) => (
+                    {fetching ? <TableSkeleton /> : userPage.users.map((user: IUserItem) => (
                         <Table.Row key={user.id} id={`row-${user.fullName.replace(/\s+/g, '-')}`}>
                             <Table.DataCell>{user.fullName}</Table.DataCell>
                             <Table.DataCell>{user.organisationUnitName}</Table.DataCell>

From 44f0e5b919d0b935aa3743c3d07e3bbcf699912f Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Thu, 3 Oct 2024 10:02:02 +0200
Subject: [PATCH 11/12] Add spinner to more-info-button

---
 .../common/Buttons/SeeInfoButton.tsx          | 36 +++++++++++++++++++
 .../resource-admin/ResourceAdminTable.tsx     | 36 +++++++------------
 app/components/resource/ResourceTable.tsx     | 30 ++++------------
 app/components/role/RoleTable.tsx             | 28 +++------------
 app/components/user/UserTable.tsx             | 28 ++++-----------
 app/routes/users._index.tsx                   |  1 -
 6 files changed, 67 insertions(+), 92 deletions(-)
 create mode 100644 app/components/common/Buttons/SeeInfoButton.tsx

diff --git a/app/components/common/Buttons/SeeInfoButton.tsx b/app/components/common/Buttons/SeeInfoButton.tsx
new file mode 100644
index 0000000..21da017
--- /dev/null
+++ b/app/components/common/Buttons/SeeInfoButton.tsx
@@ -0,0 +1,36 @@
+import React, {useEffect, useMemo} from "react";
+import {useNavigate, useNavigation} from "@remix-run/react";
+import {Button} from "@navikt/ds-react";
+import {InformationSquareIcon} from "@navikt/aksel-icons";
+
+type SeeInfoButtonProps = {
+    id: string
+    url: string
+}
+
+export const SeeInfoButton = ({id, url}: SeeInfoButtonProps) => {
+    const navigate = useNavigate();
+    const navigation = useNavigation()
+    const isLoading = useMemo(() => navigation.state === "loading" && navigation.location.pathname.endsWith(url), [navigation, url])
+
+    return (
+        <Button
+            id={id}
+            icon={
+                <InformationSquareIcon
+                    title="Informasjonsikon"
+                    fontSize="1.5rem"
+                />
+            }
+            iconPosition={"right"}
+            onClick={() =>
+                navigate(url)
+            }
+            variant={"secondary"}
+            role="link"
+            loading={isLoading}
+        >
+            Se info
+        </Button>
+    )
+}
\ No newline at end of file
diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx
index 43df722..3e7f93b 100644
--- a/app/components/resource-admin/ResourceAdminTable.tsx
+++ b/app/components/resource-admin/ResourceAdminTable.tsx
@@ -1,6 +1,6 @@
 import {Button, Dropdown, HStack, Link, Table} from "@navikt/ds-react";
-import {FunnelIcon, InformationSquareIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons";
-import {Outlet, useNavigate, useSearchParams} from "@remix-run/react";
+import {FunnelIcon, MinusIcon, TrashIcon} from "@navikt/aksel-icons";
+import {Outlet, useSearchParams} from "@remix-run/react";
 import type {IResourceAdminList} from "~/data/types";
 import React from "react";
 import {prepareQueryParams} from "~/components/common/CommonFunctions";
@@ -8,6 +8,7 @@ import {StatusTag} from "~/components/resource-admin/StatusTag";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
 import {useLoadingState} from "~/components/common/customHooks";
+import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton";
 
 interface ResourceTableProps {
     resourcePage: IResourceAdminList,
@@ -16,8 +17,6 @@ interface ResourceTableProps {
 }
 
 export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTableProps) => {
-
-    const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams()
     const {fetching} = useLoadingState()
 
@@ -74,7 +73,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {fetching ? <TableSkeleton columns={5} /> : resourcePage.resources.map((resource) => (
+                    {fetching ? <TableSkeleton columns={5}/> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell>{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
@@ -103,29 +102,20 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                                 </Button>*/}
 
                             <Table.DataCell align="center">
-                                <Button
-                                    icon={
-                                        <InformationSquareIcon
-                                            title="Informasjonsikon"
-                                            fontSize="1.5rem"
-                                        />
-                                    }
-                                    iconPosition={"right"}
-                                    onClick={() =>
-                                        navigate(`/resource-admin/${resource.id}`)
-                                    }
-                                    // id={`resource-${i}`}
-                                    variant={"secondary"}
-                                    role="link"
-                                >
-                                    Se info
-                                </Button>
+                                <SeeInfoButton
+                                    id={`resourceAdminInfoButton-${resource.id}`}
+                                    url={`/resource-admin/${resource.id}`}
+                                />
                             </Table.DataCell>
                         </Table.Row>
                     ))}
                 </Table.Body>
             </Table>
-            <TablePagination currentPage={resourcePage.currentPage} totalPages={resourcePage.totalPages} size={size ?? 10}/>
+            <TablePagination
+                currentPage={resourcePage.currentPage}
+                totalPages={resourcePage.totalPages}
+                size={size ?? 10}
+            />
         </>
     );
 };
\ No newline at end of file
diff --git a/app/components/resource/ResourceTable.tsx b/app/components/resource/ResourceTable.tsx
index 37bbf1a..7400b15 100644
--- a/app/components/resource/ResourceTable.tsx
+++ b/app/components/resource/ResourceTable.tsx
@@ -1,11 +1,10 @@
-import {Button, Table} from "@navikt/ds-react";
-import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate} from "@remix-run/react";
+import {Table} from "@navikt/ds-react";
 import type {IResourceList} from "~/data/types";
 import React from "react";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
 import {useLoadingState} from "~/components/common/customHooks";
+import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton";
 
 interface ResourceTableProps {
     resourcePage: IResourceList
@@ -13,8 +12,6 @@ interface ResourceTableProps {
 }
 
 export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
-
-    const navigate = useNavigate();
     const {fetching} = useLoadingState()
 
     return (
@@ -28,28 +25,15 @@ export const ResourceTable = ({resourcePage, size}: ResourceTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {fetching ? <TableSkeleton  columns={3}/> : resourcePage.resources.map((resource) => (
+                    {fetching ? <TableSkeleton columns={3}/> : resourcePage.resources.map((resource) => (
                         <Table.Row key={resource.id}>
                             <Table.DataCell scope="row">{resource.resourceName}</Table.DataCell>
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
                             <Table.DataCell align="center">
-                                <Button
-                                    icon={
-                                        <InformationSquareIcon
-                                            title="Informasjonsikon"
-                                            fontSize="1.5rem"
-                                        />
-                                    }
-                                    iconPosition={"right"}
-                                    onClick={() =>
-                                        navigate(`/resources/${resource.id}/user-assignments`)
-                                    }
-                                    // id={`resource-${i}`}
-                                    variant={"secondary"}
-                                    role="link"
-                                >
-                                    Se info
-                                </Button>
+                                <SeeInfoButton
+                                    id={`resourceInfoButton-${resource.id}`}
+                                    url={`/resources/${resource.id}/user-assignments`}
+                                />
                             </Table.DataCell>
                         </Table.Row>
                     ))}
diff --git a/app/components/role/RoleTable.tsx b/app/components/role/RoleTable.tsx
index bc0a2a7..6f6e62e 100644
--- a/app/components/role/RoleTable.tsx
+++ b/app/components/role/RoleTable.tsx
@@ -1,18 +1,17 @@
-import {Button, Table} from "@navikt/ds-react";
-import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate} from "@remix-run/react";
+import {Table} from "@navikt/ds-react";
 import type {IRoleList} from "~/data/types";
 import React from "react";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
 import {useLoadingState} from "~/components/common/customHooks";
+import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton";
 
 interface RoleTableProps {
     rolePage: IRoleList
     size: string
 }
-export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
-    const navigate = useNavigate();
+
+export const RoleTable = ({rolePage, size}: RoleTableProps) => {
     const {fetching} = useLoadingState()
 
     return (
@@ -34,24 +33,7 @@ export const RoleTable = ({ rolePage, size }: RoleTableProps) => {
                                 <Table.DataCell>{role.organisationUnitName}</Table.DataCell>
                                 <Table.DataCell>{role.roleType}</Table.DataCell>
                                 <Table.DataCell align="right">
-                                    <Button
-                                        id={`roleInfoButton-${role.id}`}
-                                        icon={
-                                            <InformationSquareIcon
-                                                title="Informasjonsikon"
-                                                fontSize="1.5rem"
-                                            />
-                                        }
-                                        iconPosition={"right"}
-                                        onClick={() =>
-                                            navigate(`/roles/${role.id}/members`)
-                                        }
-                                        // id={`resource-${i}`}
-                                        variant={"secondary"}
-                                        role="link"
-                                    >
-                                        Se info
-                                    </Button>
+                                    <SeeInfoButton id={`roleInfoButton-${role.id}`} url={`/roles/${role.id}/members`}/>
                                 </Table.DataCell>
                             </Table.Row>
                         ))}
diff --git a/app/components/user/UserTable.tsx b/app/components/user/UserTable.tsx
index 117f4b8..c32b51e 100644
--- a/app/components/user/UserTable.tsx
+++ b/app/components/user/UserTable.tsx
@@ -1,11 +1,10 @@
-import {Button, Table} from "@navikt/ds-react";
-import {InformationSquareIcon} from "@navikt/aksel-icons";
-import {useNavigate} from "@remix-run/react";
+import {Table} from "@navikt/ds-react";
 import {IUserItem, IUserPage} from "~/data/types";
 import React from "react";
 import {TableSkeleton} from "~/components/common/Table/TableSkeleton";
 import {TablePagination} from "~/components/common/Table/TablePagination";
 import {useLoadingState} from "~/components/common/customHooks";
+import {SeeInfoButton} from "~/components/common/Buttons/SeeInfoButton";
 
 interface UserTableProps {
     userPage: IUserPage
@@ -13,7 +12,6 @@ interface UserTableProps {
 }
 
 export const UserTable = ({userPage, size}: UserTableProps) => {
-    const navigate = useNavigate();
     const {fetching} = useLoadingState()
 
     return (
@@ -28,30 +26,16 @@ export const UserTable = ({userPage, size}: UserTableProps) => {
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {fetching ? <TableSkeleton /> : userPage.users.map((user: IUserItem) => (
+                    {fetching ? <TableSkeleton/> : userPage.users.map((user: IUserItem) => (
                         <Table.Row key={user.id} id={`row-${user.fullName.replace(/\s+/g, '-')}`}>
                             <Table.DataCell>{user.fullName}</Table.DataCell>
                             <Table.DataCell>{user.organisationUnitName}</Table.DataCell>
                             <Table.DataCell>{user.userType}</Table.DataCell>
                             <Table.DataCell align="right">
-                                <Button
+                                <SeeInfoButton
                                     id={`userInfoButton-${user.id}`}
-                                    icon={
-                                        <InformationSquareIcon
-                                            title="Informasjonsikon"
-                                            fontSize="1.5rem"
-                                        />
-                                    }
-                                    iconPosition={"right"}
-                                    onClick={() =>
-                                        navigate(`/users/${user.id}/orgunit/${user.organisationUnitId}`)
-                                    }
-                                    // id={`resource-${i}`}
-                                    variant={"secondary"}
-                                    role="link"
-                                >
-                                    Se info
-                                </Button>
+                                    url={`/users/${user.id}/orgunit/${user.organisationUnitId}`}
+                                />
                             </Table.DataCell>
                         </Table.Row>
                     ))}
diff --git a/app/routes/users._index.tsx b/app/routes/users._index.tsx
index 4bedf0d..f65f0d7 100644
--- a/app/routes/users._index.tsx
+++ b/app/routes/users._index.tsx
@@ -41,7 +41,6 @@ export default function UsersIndex() {
         orgUnitList: IUnitItem[]
         size: string
     }>();
-    const [searchParams,] = useSearchParams()
     const size = data.size
 
     return (

From 4f92bca35033fb0f8105af4ab6c9665babf7b3e5 Mon Sep 17 00:00:00 2001
From: IngMyr <ingrid.myrann@gmail.com>
Date: Thu, 10 Oct 2024 14:57:21 +0200
Subject: [PATCH 12/12] Deploy

---
 .github/workflows/deploy.yaml                 | 30 +++++++++----------
 .../resource-admin/ResourceAdminTable.tsx     |  6 ++--
 app/routes/resource-admin._index.tsx          |  8 ++---
 .../forvalte-ressurser/slettRessurs.cy.ts     |  3 +-
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 8897f6d..b2bc641 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -75,15 +75,15 @@ jobs:
           - path: /beta/fintlabs-no
             environment: beta
             org: fintlabs-no
-#          - path: /bfk-no
-#            environment: api
-#            org: bfk-no
-#          - path: /afk-no
-#            environment: api
-#            org: afk-no
-#          - path: /ofk-no
-#            environment: api
-#            org: ofk-no
+          - path: /bfk-no
+            environment: api
+            org: bfk-no
+          - path: /afk-no
+            environment: api
+            org: afk-no
+          - path: /ofk-no
+            environment: api
+            org: ofk-no
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -142,12 +142,12 @@ jobs:
         include:
           - org: fintlabs-no
             cluster: aks-beta-fint-2021-11-23
-#          - org: bfk-no
-#            cluster: aks-api-fint-2022-02-08
-#          - org: afk-no
-#            cluster: aks-api-fint-2022-02-08
-#          - org: ofk-no
-#            cluster: aks-api-fint-2022-02-08
+          - org: bfk-no
+            cluster: aks-api-fint-2022-02-08
+          - org: afk-no
+            cluster: aks-api-fint-2022-02-08
+          - org: ofk-no
+            cluster: aks-api-fint-2022-02-08
 
     steps:
       - name: Checkout repository
diff --git a/app/components/resource-admin/ResourceAdminTable.tsx b/app/components/resource-admin/ResourceAdminTable.tsx
index 3e7f93b..d3a55bd 100644
--- a/app/components/resource-admin/ResourceAdminTable.tsx
+++ b/app/components/resource-admin/ResourceAdminTable.tsx
@@ -68,7 +68,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                                     </Dropdown.Menu.GroupedList>
                                 </Dropdown.Menu>
                             </Dropdown></Table.HeaderCell>
-                        <Table.HeaderCell scope="col">Slett</Table.HeaderCell>
+                        {/*<Table.HeaderCell scope="col">Slett</Table.HeaderCell>*/}
                         <Table.HeaderCell scope="col" align="center">Se mer informasjon</Table.HeaderCell>
                     </Table.Row>
                 </Table.Header>
@@ -79,7 +79,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                             <Table.DataCell>{resource.resourceType}</Table.DataCell>
                             <Table.DataCell>{<StatusTag status={resource.status}/>}</Table.DataCell>
 
-                            <Table.DataCell>
+{/*                            <Table.DataCell>
                                 {resource.status === "DELETED" ?
                                     <MinusIcon title="a11y-title" fontSize="1.5rem"/>
                                     :
@@ -88,7 +88,7 @@ export const ResourceAdminTable = ({resourcePage, size, basePath}: ResourceTable
                                         {<TrashIcon title="Slett" fontSize="1.5rem"/>}
                                     </Link>
                                 }
-                            </Table.DataCell>
+                            </Table.DataCell>*/}
                             {/*<Button
                                     id={"delete-test"}
                                     as={Link}
diff --git a/app/routes/resource-admin._index.tsx b/app/routes/resource-admin._index.tsx
index 8308e48..b7b7dcd 100644
--- a/app/routes/resource-admin._index.tsx
+++ b/app/routes/resource-admin._index.tsx
@@ -73,14 +73,14 @@ export default function ResourceAdminIndex() {
     return (
         <VStack className={"content"} gap="4">
             <Heading className={"heading"} level="1" size="xlarge">Ressursadministrasjon</Heading>
-            <HStack justify={"space-between"}>
-                <HStack justify={"start"} align={"end"}>
+            {/*<HStack justify={"space-between"}>*/}
+{/*                <HStack justify={"start"} align={"end"}>
                     <Box paddingBlock="4">
                         <Link href={"resource-admin/opprett-ny-applikasjonsressurs"} id="create-resource">
                             <PlusIcon title="a11y-title" fontSize="1rem"/> Opprett ny ressurs
                         </Link>
                     </Box>
-                </HStack>
+                </HStack>*/}
                 <HStack justify="end" align="end">
                     <ResourceSelectApplicationCategory applicationCategories={applicationCategories}/>
 
@@ -99,7 +99,7 @@ export default function ResourceAdminIndex() {
                 </Select>*/}
                     <Search label={"Søk etter ressurs"} id={"search-resource-admin"}/>
                 </HStack>
-            </HStack>
+            {/*</HStack>*/}
             <HStack justify="end">
                 <ChipsFilters/>
             </HStack>
diff --git a/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts b/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts
index 3b5c386..2fba9ab 100644
--- a/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts
+++ b/cypress/e2e/ressurser/forvalte-ressurser/slettRessurs.cy.ts
@@ -1,3 +1,4 @@
+/*
 describe('Test delete resource', () => {
     it('Navigate to resource-admin and click delete on resource in table', () => {
         cy.goToResourceAdmin();
@@ -41,4 +42,4 @@ describe('Test delete resource', () => {
         });
 
     });
-});
\ No newline at end of file
+});*/