From 42a8f8ebcd9b25ae20757934d3e46f7a9c9e2735 Mon Sep 17 00:00:00 2001
From: Martin Gunnerud <mgunnerud@gmail.com>
Date: Mon, 1 Jul 2024 09:11:44 +0200
Subject: [PATCH] refactor localization: include translations in build (instead
 of loading them) + remove extra common namespace (#956)

---
 .../CollectionBar/CollectionBar.tsx           |  2 +-
 .../CompactDeletableListItem.tsx              |  2 +-
 .../DeletableListItem/DeletableListItem.tsx   |  2 +-
 src/components/ErrorPanel/ErrorPanel.tsx      |  2 +-
 src/components/Filter/Filter.tsx              |  2 +-
 src/components/Filter/OptionDisplay.tsx       |  2 +-
 .../PageContainer/PageContainer.tsx           |  2 +-
 .../RestartPrompter/RestartPrompter.tsx       |  2 +-
 src/features/amUI/users/UsersPage.tsx         |  2 +-
 .../components/ApiActionBar/ApiActionBar.tsx  |  2 +-
 .../OrgDelegationActionBar.tsx                |  2 +-
 .../OverviewPageContent.tsx                   |  2 +-
 .../offered/ChooseApiPage/ApiSearchResult.tsx |  2 +-
 .../offered/ChooseApiPage/ChooseApiPage.tsx   |  2 +-
 .../ChooseOrgPage/ChooseOrgInfoPanel.tsx      |  2 +-
 .../offered/ChooseOrgPage/ChooseOrgPage.tsx   |  2 +-
 .../offered/ChooseOrgPage/ChosenItems.tsx     |  2 +-
 .../ChooseOrgPage/DelegableOrgItems.tsx       |  2 +-
 .../ConfirmationPage/ConfirmationPage.tsx     |  2 +-
 .../offered/OverviewPage/OverviewPage.tsx     |  2 +-
 .../offered/ReceiptPage/ReceiptPage.tsx       |  2 +-
 .../received/OverviewPage/OverviewPage.tsx    |  2 +-
 .../RecipientErrorAlert.tsx                   |  2 +-
 .../ResourceActionBar/ResourceActionBar.tsx   |  2 +-
 .../ResourceCollectionBar.tsx                 |  2 +-
 .../SearchSection/SearchSection.tsx           |  2 +-
 .../ChooseRightsPage/ChooseRightsPage.tsx     |  2 +-
 .../RightsActionBar/RightsActionBar.tsx       |  2 +-
 .../RightsActionBarContent.tsx                |  2 +-
 .../ChooseServicePage/ChooseServicePage.tsx   |  2 +-
 .../ChooseServicePage/ChooseServicePage.tsx   |  2 +-
 src/main.jsx                                  | 65 +++++++++----------
 .../LoadLocalizations/LoadLocalizations.tsx   | 38 -----------
 src/resources/LoadLocalizations/index.ts      |  1 -
 src/resources/hooks/useFetchRecipientInfo.tsx |  2 +-
 src/sites/ErrorPage/ErrorPage.tsx             |  2 +-
 src/sites/ErrorPage/contents/PageNotFound.tsx |  2 +-
 src/sites/ErrorPage/contents/UnknownError.tsx |  2 +-
 38 files changed, 67 insertions(+), 107 deletions(-)
 delete mode 100644 src/resources/LoadLocalizations/LoadLocalizations.tsx
 delete mode 100644 src/resources/LoadLocalizations/index.ts

diff --git a/src/components/CollectionBar/CollectionBar.tsx b/src/components/CollectionBar/CollectionBar.tsx
index bdd5fe70e..7de199bb0 100644
--- a/src/components/CollectionBar/CollectionBar.tsx
+++ b/src/components/CollectionBar/CollectionBar.tsx
@@ -35,7 +35,7 @@ export const CollectionBar = ({
   proceedToPath,
   disabledProceedButton,
 }: CollectionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const proceedClick = () => {
diff --git a/src/components/CompactDeletableListItem/CompactDeletableListItem.tsx b/src/components/CompactDeletableListItem/CompactDeletableListItem.tsx
index 2b1f802f7..e3a329c17 100644
--- a/src/components/CompactDeletableListItem/CompactDeletableListItem.tsx
+++ b/src/components/CompactDeletableListItem/CompactDeletableListItem.tsx
@@ -32,7 +32,7 @@ export const CompactDeletableListItem = ({
   startIcon,
   contentColor = ListTextColor.primary,
 }: CompactDeletableListItemProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
 
   return (
diff --git a/src/components/DeletableListItem/DeletableListItem.tsx b/src/components/DeletableListItem/DeletableListItem.tsx
index 3054fade0..5ef690b30 100644
--- a/src/components/DeletableListItem/DeletableListItem.tsx
+++ b/src/components/DeletableListItem/DeletableListItem.tsx
@@ -28,7 +28,7 @@ export const DeletableListItem = ({
   isEditable,
   scopes,
 }: DeletableListItemProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
 
   const isEditableActions = (
diff --git a/src/components/ErrorPanel/ErrorPanel.tsx b/src/components/ErrorPanel/ErrorPanel.tsx
index c384bf8cb..6bc4094bf 100644
--- a/src/components/ErrorPanel/ErrorPanel.tsx
+++ b/src/components/ErrorPanel/ErrorPanel.tsx
@@ -11,7 +11,7 @@ export interface ErrorPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const ErrorPanel = ({ title, message, statusCode, ...props }: ErrorPanelProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const currentDate = new Date();
 
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index b605ecb87..b1afa8b3a 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -93,7 +93,7 @@ export const Filter = ({
   const [checkedFilters, setCheckedFilters] = useState<string[]>(values ?? []);
   const [hasChanges, setHasChanges] = useState(false);
   const filterButtonID = useId();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   // Update selected values when there are external changes
   const prevvalues = usePrevious(values);
diff --git a/src/components/Filter/OptionDisplay.tsx b/src/components/Filter/OptionDisplay.tsx
index 273339d04..3736aebed 100644
--- a/src/components/Filter/OptionDisplay.tsx
+++ b/src/components/Filter/OptionDisplay.tsx
@@ -49,7 +49,7 @@ export const OptionDisplay = ({
 }: OptionDisplayProps) => {
   const [selectedValues, setSelectedValues] = useState<string[]>(values ?? []);
   const [sortedOptions, setSortedOptions] = useState<FilterOption[]>(options);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   // Update selected values when there are external changes
   const prevvalues = usePrevious(values);
diff --git a/src/components/PageContainer/PageContainer.tsx b/src/components/PageContainer/PageContainer.tsx
index 1dfa2e209..08fb54feb 100644
--- a/src/components/PageContainer/PageContainer.tsx
+++ b/src/components/PageContainer/PageContainer.tsx
@@ -13,7 +13,7 @@ export interface PageContainerProps {
 }
 
 export const PageContainer = ({ children }: PageContainerProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div className={classes.background}>
diff --git a/src/components/RestartPrompter/RestartPrompter.tsx b/src/components/RestartPrompter/RestartPrompter.tsx
index 27abbcbb6..0a3a3a546 100644
--- a/src/components/RestartPrompter/RestartPrompter.tsx
+++ b/src/components/RestartPrompter/RestartPrompter.tsx
@@ -29,7 +29,7 @@ export const RestartPrompter = ({
   restartPath,
 }: RestartPrompterProps) => {
   const navigate = useNavigate();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <Alert
diff --git a/src/features/amUI/users/UsersPage.tsx b/src/features/amUI/users/UsersPage.tsx
index 643cdb5d1..4f96d1ae5 100644
--- a/src/features/amUI/users/UsersPage.tsx
+++ b/src/features/amUI/users/UsersPage.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { PageWrapper } from '@/components';
 
 export const UsersPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   useDocumentTitle(t('users_page.page_title'));
   return <PageWrapper>Hello world!</PageWrapper>;
 };
diff --git a/src/features/apiDelegation/components/ApiActionBar/ApiActionBar.tsx b/src/features/apiDelegation/components/ApiActionBar/ApiActionBar.tsx
index 6abbb7701..26534ba2d 100644
--- a/src/features/apiDelegation/components/ApiActionBar/ApiActionBar.tsx
+++ b/src/features/apiDelegation/components/ApiActionBar/ApiActionBar.tsx
@@ -40,7 +40,7 @@ export const ApiActionBar = ({
   const [actionBarColor, setActionBarColor] = useState<'success' | 'danger' | 'neutral'>(
     variant === 'remove' ? 'success' : 'neutral',
   );
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const resourceRef: ResourceReference = { resource: api.authorizationReference };
   const partyId = getCookie('AltinnPartyId');
 
diff --git a/src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx b/src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx
index 9ddd1bdad..9890c74d6 100644
--- a/src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx
+++ b/src/features/apiDelegation/components/OverviewPageContent/OrgDelegationActionBar/OrgDelegationActionBar.tsx
@@ -32,7 +32,7 @@ export const OrgDelegationActionBar = ({
   setScreenreaderMsg,
 }: OrgDelegationActionBarProps) => {
   const [open, setOpen] = useState(false);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const numberOfAccesses = organization.apiList.length.toString();
   const dispatch = useAppDispatch();
   const isSm = useMediaQuery('(max-width: 768px)');
diff --git a/src/features/apiDelegation/components/OverviewPageContent/OverviewPageContent.tsx b/src/features/apiDelegation/components/OverviewPageContent/OverviewPageContent.tsx
index 73c1f3e74..dd93a86a1 100644
--- a/src/features/apiDelegation/components/OverviewPageContent/OverviewPageContent.tsx
+++ b/src/features/apiDelegation/components/OverviewPageContent/OverviewPageContent.tsx
@@ -41,7 +41,7 @@ export const OverviewPageContent = ({
 }: OverviewPageContentInterface) => {
   const [saveDisabled, setSaveDisabled] = useState(false);
   const [isEditable, setIsEditable] = useState(false);
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const overviewOrgs = useAppSelector((state) => state.overviewOrg.overviewOrgs);
diff --git a/src/features/apiDelegation/offered/ChooseApiPage/ApiSearchResult.tsx b/src/features/apiDelegation/offered/ChooseApiPage/ApiSearchResult.tsx
index ed74b5ab1..fec80f2bd 100644
--- a/src/features/apiDelegation/offered/ChooseApiPage/ApiSearchResult.tsx
+++ b/src/features/apiDelegation/offered/ChooseApiPage/ApiSearchResult.tsx
@@ -31,7 +31,7 @@ export const ApiSearchResults = ({
   chosenApis,
   addApi,
 }: ApiSearchResultsProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const { statusMessage, unchosenApis } = useMemo(() => {
     const unchosenApis = searchResults?.filter(
diff --git a/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx b/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx
index 44158a7b8..302dd6072 100644
--- a/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx
+++ b/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx
@@ -39,7 +39,7 @@ export const ChooseApiPage = () => {
   const [showSkeleton, setShowSkeleton] = useState(true);
   const [filters, setFilters] = useState<string[]>([]);
   const isSm = useMediaQuery('(max-width: 768px)');
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const partyId = getCookie('AltinnPartyId');
   const navigate = useNavigate();
   const [urlParams, setUrlParams] = useSearchParams();
diff --git a/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgInfoPanel.tsx b/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgInfoPanel.tsx
index 82d6f19c9..0318bbf0e 100644
--- a/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgInfoPanel.tsx
+++ b/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgInfoPanel.tsx
@@ -20,7 +20,7 @@ export const ChooseOrgInfoPanel = ({
   searchOrgNotExist,
   searchLoading,
 }: InfoPanelProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const reporteeOrgNumber = useAppSelector((state) => state.userInfo.reporteeOrgNumber);
   if (reporteeOrgNumber === searchString && searchString.length > 0) {
     return (
diff --git a/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx b/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx
index 701bf5b5f..943e4a9dc 100644
--- a/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx
+++ b/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx
@@ -36,7 +36,7 @@ export const ChooseOrgPage = () => {
   const [chosenItemsStatusMessage, setChosenItemsStatusMessage] = useState('');
   const navigate = useNavigate();
 
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const { matches: displayOrgs, error, isFetching } = useOrgSearch(overviewOrgs, searchString);
 
diff --git a/src/features/apiDelegation/offered/ChooseOrgPage/ChosenItems.tsx b/src/features/apiDelegation/offered/ChooseOrgPage/ChosenItems.tsx
index 6bfc991c1..98080a736 100644
--- a/src/features/apiDelegation/offered/ChooseOrgPage/ChosenItems.tsx
+++ b/src/features/apiDelegation/offered/ChooseOrgPage/ChosenItems.tsx
@@ -22,7 +22,7 @@ export const ChosenItems = ({
   handleSoftRemove,
   setChosenItemsStatusMessage,
 }: ChosenItemsProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   return (
     <ul className={common.unstyledList}>
       {chosenOrgs.map((org: Organization, index: Key | null | undefined) => {
diff --git a/src/features/apiDelegation/offered/ChooseOrgPage/DelegableOrgItems.tsx b/src/features/apiDelegation/offered/ChooseOrgPage/DelegableOrgItems.tsx
index 972977d22..c78cbbdfc 100644
--- a/src/features/apiDelegation/offered/ChooseOrgPage/DelegableOrgItems.tsx
+++ b/src/features/apiDelegation/offered/ChooseOrgPage/DelegableOrgItems.tsx
@@ -22,7 +22,7 @@ export const DelegableOrgItems = ({
   setChosenItemsStatusMessage,
 }: DelegatableOrgItemsProps) => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <ul className={common.unstyledList}>
diff --git a/src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.tsx b/src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.tsx
index 8e8a96c8d..45e84b54d 100644
--- a/src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.tsx
+++ b/src/features/apiDelegation/offered/ConfirmationPage/ConfirmationPage.tsx
@@ -42,7 +42,7 @@ export const ConfirmationPage = () => {
   const loading = useAppSelector((state) => state.delegationRequest.loading);
   const [isProcessingDelegations, setIsProcessingDelegations] = useState(false);
   const isSm = useMediaQuery('(max-width: 768px)');
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   useDocumentTitle(t('api_delegation.delegate_page_title'));
diff --git a/src/features/apiDelegation/offered/OverviewPage/OverviewPage.tsx b/src/features/apiDelegation/offered/OverviewPage/OverviewPage.tsx
index 0a547ec5b..e458b65d8 100644
--- a/src/features/apiDelegation/offered/OverviewPage/OverviewPage.tsx
+++ b/src/features/apiDelegation/offered/OverviewPage/OverviewPage.tsx
@@ -10,7 +10,7 @@ import { OverviewPageContent } from '../../components/OverviewPageContent';
 import { LayoutState } from '../../components/LayoutState';
 
 export const OverviewPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   useDocumentTitle(t('api_delegation.delegate_page_title'));
 
diff --git a/src/features/apiDelegation/offered/ReceiptPage/ReceiptPage.tsx b/src/features/apiDelegation/offered/ReceiptPage/ReceiptPage.tsx
index d5916193e..9601fb494 100644
--- a/src/features/apiDelegation/offered/ReceiptPage/ReceiptPage.tsx
+++ b/src/features/apiDelegation/offered/ReceiptPage/ReceiptPage.tsx
@@ -31,7 +31,7 @@ export const ReceiptPage = () => {
   const successfulApiDelegations = useAppSelector(
     (state) => state.delegationRequest.succesfulApiDelegations,
   );
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isSm = useMediaQuery('(max-width: 768px)');
   const navigate = useNavigate();
diff --git a/src/features/apiDelegation/received/OverviewPage/OverviewPage.tsx b/src/features/apiDelegation/received/OverviewPage/OverviewPage.tsx
index 9ce3c0af1..f71227122 100644
--- a/src/features/apiDelegation/received/OverviewPage/OverviewPage.tsx
+++ b/src/features/apiDelegation/received/OverviewPage/OverviewPage.tsx
@@ -10,7 +10,7 @@ import { OverviewPageContent } from '../../components/OverviewPageContent';
 import { LayoutState } from '../../components/LayoutState';
 
 export const OverviewPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   useDocumentTitle(t('api_delegation.received_page_title'));
 
diff --git a/src/features/singleRight/components/RecipientErrorAlert/RecipientErrorAlert.tsx b/src/features/singleRight/components/RecipientErrorAlert/RecipientErrorAlert.tsx
index fa7b0edea..16220f8a1 100644
--- a/src/features/singleRight/components/RecipientErrorAlert/RecipientErrorAlert.tsx
+++ b/src/features/singleRight/components/RecipientErrorAlert/RecipientErrorAlert.tsx
@@ -8,7 +8,7 @@ type RecipientErrorAlertProps = {
 };
 
 export const RecipientErrorAlert = ({ userUUID, partyUUID }: RecipientErrorAlertProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   if (!userUUID && !partyUUID) {
     return (
diff --git a/src/features/singleRight/components/ResourceActionBar/ResourceActionBar.tsx b/src/features/singleRight/components/ResourceActionBar/ResourceActionBar.tsx
index 9d3d83596..2eb6da523 100644
--- a/src/features/singleRight/components/ResourceActionBar/ResourceActionBar.tsx
+++ b/src/features/singleRight/components/ResourceActionBar/ResourceActionBar.tsx
@@ -45,7 +45,7 @@ export const ResourceActionBar = ({
   compact = false,
   isLoading = false,
 }: ResourceActionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
   const previousStatus = usePrevious(status);
diff --git a/src/features/singleRight/components/ResourceCollectionBar/ResourceCollectionBar.tsx b/src/features/singleRight/components/ResourceCollectionBar/ResourceCollectionBar.tsx
index d6fc9d0aa..5fa5bb8e3 100644
--- a/src/features/singleRight/components/ResourceCollectionBar/ResourceCollectionBar.tsx
+++ b/src/features/singleRight/components/ResourceCollectionBar/ResourceCollectionBar.tsx
@@ -41,7 +41,7 @@ export const ResourceCollectionBar = ({
   onRemove,
   compact = false,
 }: ResourceCollectionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const selectedResourcesActionBars = resources.map((resource, index) => (
     <ActionBar
diff --git a/src/features/singleRight/components/SearchSection/SearchSection.tsx b/src/features/singleRight/components/SearchSection/SearchSection.tsx
index cf6b3f1cf..6e3370516 100644
--- a/src/features/singleRight/components/SearchSection/SearchSection.tsx
+++ b/src/features/singleRight/components/SearchSection/SearchSection.tsx
@@ -44,7 +44,7 @@ export interface SearchSectionParams {
 const searchResultsPerPage = 10;
 
 export const SearchSection = ({ onAdd, onUndo }: SearchSectionParams) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   const [filters, setFilters] = useState<string[]>([]);
   const [searchString, setSearchString] = useState('');
diff --git a/src/features/singleRight/delegate/ChooseRightsPage/ChooseRightsPage.tsx b/src/features/singleRight/delegate/ChooseRightsPage/ChooseRightsPage.tsx
index 622583ff8..6e449cdff 100644
--- a/src/features/singleRight/delegate/ChooseRightsPage/ChooseRightsPage.tsx
+++ b/src/features/singleRight/delegate/ChooseRightsPage/ChooseRightsPage.tsx
@@ -54,7 +54,7 @@ type Service = {
 };
 
 export const ChooseRightsPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const [urlParams] = useSearchParams();
diff --git a/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBar/RightsActionBar.tsx b/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBar/RightsActionBar.tsx
index a97f66fdc..da70c03e0 100644
--- a/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBar/RightsActionBar.tsx
+++ b/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBar/RightsActionBar.tsx
@@ -25,7 +25,7 @@ export const RightsActionBar = ({
   defaultOpen,
   compact = false,
 }: RightsActionBarProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const removeButton = (
     <Button
diff --git a/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBarContent/RightsActionBarContent.tsx b/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBarContent/RightsActionBarContent.tsx
index 582b3a386..6e2cb1bdb 100644
--- a/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBarContent/RightsActionBarContent.tsx
+++ b/src/features/singleRight/delegate/ChooseRightsPage/RightsActionBarContent/RightsActionBarContent.tsx
@@ -48,7 +48,7 @@ export const RightsActionBarContent = ({
   serviceIdentifier,
   serviceType,
 }: RightsActionBarContentProps) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const hasUndelegableRights =
     rights.some((r) => r.delegable === false) && serviceType !== 'AltinnApp';
   const [errorList, setErrorList] = useState<string[]>([]);
diff --git a/src/features/singleRight/delegate/ChooseServicePage/ChooseServicePage.tsx b/src/features/singleRight/delegate/ChooseServicePage/ChooseServicePage.tsx
index 68a6d3483..d80b9d78b 100644
--- a/src/features/singleRight/delegate/ChooseServicePage/ChooseServicePage.tsx
+++ b/src/features/singleRight/delegate/ChooseServicePage/ChooseServicePage.tsx
@@ -29,7 +29,7 @@ import classes from './ChooseServicePage.module.css';
 import { NavigationSection } from '../../components/NavigationSection/NavigationSection';
 
 export const ChooseServicePage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const isSm = useMediaQuery('(max-width: 768px)');
   const dispatch = useAppDispatch();
diff --git a/src/features/singleRight/request/ChooseServicePage/ChooseServicePage.tsx b/src/features/singleRight/request/ChooseServicePage/ChooseServicePage.tsx
index 27dbd2fbc..0d58e9024 100644
--- a/src/features/singleRight/request/ChooseServicePage/ChooseServicePage.tsx
+++ b/src/features/singleRight/request/ChooseServicePage/ChooseServicePage.tsx
@@ -23,7 +23,7 @@ import { NavigationSection } from '../../components/NavigationSection/Navigation
 import classes from './ChooseServicePage.module.css';
 
 export const ChooseServicePage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const isSm = useMediaQuery('(max-width: 768px)');
   const dispatch = useAppDispatch();
   const reporteeName = useAppSelector((state) => state.userInfo.reporteeName);
diff --git a/src/main.jsx b/src/main.jsx
index 3015172be..e14430322 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,19 +1,20 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { initReactI18next } from 'react-i18next';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { use } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-
+import no_nb from './localizations/no_nb.json';
+import no_nn from './localizations/no_nn.json';
+import en from './localizations/en.json';
 import { RefreshToken } from '@/resources/Token/RefreshToken';
 import { Router } from '@/routes/Router/Router';
 
 import { getConfig } from '../config';
 
-import LoadLocalizations from './resources/LoadLocalizations';
 import store from './rtk/app/store';
 
 import '@digdir/designsystemet-css';
@@ -31,33 +32,31 @@ const queryClientDevDefaults = {
 // Initialise i18next; start application when ready
 use(LanguageDetector)
   .use(initReactI18next)
-  .init(
-    {
-      fallbackLng: getConfig('defaultLocale'),
-      ns: ['common'],
-      defaultNS: 'common',
-      returnNull: false,
-    },
-
-    () => {
-      // Configure react-query
-      const queryClient = new QueryClient({
-        defaultOptions: import.meta.env.DEV ? queryClientDevDefaults : undefined,
-      });
-
-      ReactDOM.createRoot(document.getElementById('root')).render(
-        // if you ever wonder why the components render twice it's because of React.StrictMode
-        // comment it out if it causes trouble: https://react.dev/reference/react/StrictMode
-        <React.StrictMode>
-          <Provider store={store}>
-            <QueryClientProvider client={queryClient}>
-              <LoadLocalizations>
-                <RefreshToken />
-                <RouterProvider router={Router}></RouterProvider>
-              </LoadLocalizations>
-            </QueryClientProvider>
-          </Provider>
-        </React.StrictMode>,
-      );
+  .init({
+    resources: {
+      no_nb: { translation: no_nb },
+      no_nn: { translation: no_nn },
+      en: { translation: en },
     },
-  );
+    fallbackLng: getConfig('defaultLocale'),
+    keySeparator: '.',
+    returnNull: false,
+  });
+
+// Configure react-query
+const queryClient = new QueryClient({
+  defaultOptions: import.meta.env.DEV ? queryClientDevDefaults : undefined,
+});
+
+createRoot(document.getElementById('root')).render(
+  // if you ever wonder why the components render twice it's because of React.StrictMode
+  // comment it out if it causes trouble: https://react.dev/reference/react/StrictMode
+  <React.StrictMode>
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RefreshToken />
+        <RouterProvider router={Router}></RouterProvider>
+      </QueryClientProvider>
+    </Provider>
+  </React.StrictMode>,
+);
diff --git a/src/resources/LoadLocalizations/LoadLocalizations.tsx b/src/resources/LoadLocalizations/LoadLocalizations.tsx
deleted file mode 100644
index ce8b13440..000000000
--- a/src/resources/LoadLocalizations/LoadLocalizations.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import i18next from 'i18next';
-import * as React from 'react';
-
-import { getCookie } from '../Cookie/CookieMethods';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const LoadLocalizations = ({ children }: Props) => {
-  const getLanguageFile = async () => {
-    const value = getCookie('i18next');
-    if (value === 'no_nn') {
-      return [await import('../../localizations/no_nn.json'), 'no_nn'] as const;
-    } else if (value === 'en') {
-      return [await import('../../localizations/en.json'), 'en'] as const;
-    } else {
-      return [await import('../../localizations/no_nb.json'), 'no_nb'] as const;
-    }
-  };
-
-  useQuery(
-    ['Localizations'],
-    async () => {
-      const [data, language] = await getLanguageFile();
-      return i18next.addResourceBundle(language, 'common', data.default);
-    },
-    {
-      staleTime: Infinity,
-      suspense: true,
-    },
-  );
-
-  return <>{children}</>;
-};
-
-export default LoadLocalizations;
diff --git a/src/resources/LoadLocalizations/index.ts b/src/resources/LoadLocalizations/index.ts
deleted file mode 100644
index b6f54d806..000000000
--- a/src/resources/LoadLocalizations/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LoadLocalizations';
diff --git a/src/resources/hooks/useFetchRecipientInfo.tsx b/src/resources/hooks/useFetchRecipientInfo.tsx
index 444a24390..6b4d744c9 100644
--- a/src/resources/hooks/useFetchRecipientInfo.tsx
+++ b/src/resources/hooks/useFetchRecipientInfo.tsx
@@ -18,7 +18,7 @@ export const useFetchRecipientInfo = (
   error: boolean;
   isLoading: boolean;
 } => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   const [recipientName, setRecipientName] = useState<string | undefined>(undefined);
   const [userID, setUserID] = useState('');
diff --git a/src/sites/ErrorPage/ErrorPage.tsx b/src/sites/ErrorPage/ErrorPage.tsx
index 7fa9bdc45..c7be81a6e 100644
--- a/src/sites/ErrorPage/ErrorPage.tsx
+++ b/src/sites/ErrorPage/ErrorPage.tsx
@@ -11,7 +11,7 @@ import { UnknownError } from './contents/UnknownError';
 import classes from './ErrorPage.module.css';
 
 export const ErrorPage = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
   const error: any = useRouteError();
   const timestamp = new Date();
 
diff --git a/src/sites/ErrorPage/contents/PageNotFound.tsx b/src/sites/ErrorPage/contents/PageNotFound.tsx
index 9d6cc89ed..9bde52734 100644
--- a/src/sites/ErrorPage/contents/PageNotFound.tsx
+++ b/src/sites/ErrorPage/contents/PageNotFound.tsx
@@ -7,7 +7,7 @@ import SeagullIcon from '@/assets/Seagull.svg?react';
 import classes from '../ErrorPage.module.css';
 
 export const PageNotFound = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div>
diff --git a/src/sites/ErrorPage/contents/UnknownError.tsx b/src/sites/ErrorPage/contents/UnknownError.tsx
index 133b3dec9..bfb6849b2 100644
--- a/src/sites/ErrorPage/contents/UnknownError.tsx
+++ b/src/sites/ErrorPage/contents/UnknownError.tsx
@@ -7,7 +7,7 @@ import SeagullIcon from '@/assets/Seagull.svg?react';
 import classes from '../ErrorPage.module.css';
 
 export const UnknownError = () => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation();
 
   return (
     <div>