Skip to content

feat: lazy app routes #16931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: lazy app routes #16931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16be104
feat: lazy loading app routes with `React.Suspense`
Jondyr Nov 10, 2025
21e2261
update imports
Jondyr Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/aiAssistant/AiAssistant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from '@studio/assistant';
import { useTranslation } from 'react-i18next';

export function AiAssistant(): ReactElement {
export default function AiAssistant(): ReactElement {
const { t } = useTranslation();

// TODO: Fetch data from backend
Expand Down
1 change: 0 additions & 1 deletion src/Designer/frontend/app-development/features/aiAssistant/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { screen, waitFor } from '@testing-library/react';
import { AppContentLibrary } from './AppContentLibrary';
import AppContentLibrary from './AppContentLibrary';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { renderWithProviders } from '../../test/mocks';
import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
Expand Down
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import { useGetAvailableOrgResourcesQuery } from '../../hooks/queries/useGetAvai
import { useImportCodeListFromOrgToAppMutation } from 'app-development/hooks/mutations/useImportCodeListFromOrgToAppMutation';
import type { ExternalResource } from 'app-shared/types/ExternalResource';

export function AppContentLibrary(): React.ReactElement {
export default function AppContentLibrary(): React.ReactElement {
const { org, app } = useStudioEnvironmentParams();
const { t } = useTranslation();
const { data: optionListDataList, status: optionListDataListStatus } = useOptionListsQuery(
Expand Down
1 change: 0 additions & 1 deletion src/Designer/frontend/app-development/features/appContentLibrary/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appPublish/pages/DeployPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { screen, waitForElementToBeRemoved } from '@testing-library/react';
import { DeployPage } from './DeployPage';
import DeployPage from './DeployPage';
import { textMock } from '@studio/testing/mocks/i18nMock';
import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
import { renderWithProviders } from 'app-development/test/mocks';
Expand Down
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appPublish/pages/DeployPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { GetInTouchWith } from 'app-shared/getInTouch';
import { StudioError, StudioPageSpinner } from '@studio/components';
import { altinnDocsUrl } from 'app-shared/ext-urls';

export function DeployPage() {
export default function DeployPage() {
const { org, app } = useStudioEnvironmentParams();
const { t } = useTranslation();
const { data: orgs, isPending: orgsIsPending, isError: orgsIsError } = useOrgListQuery();
Expand Down
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appSettings/AppSettings.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { AppSettings } from './AppSettings';
import AppSettings from './AppSettings';
import { renderWithProviders } from 'app-development/test/mocks';
import { queriesMock } from 'app-shared/mocks/queriesMock';
import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
Expand Down
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/appSettings/AppSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { StudioHeading } from '@studio/components';
import { TabsContent } from './components/TabsContent';
import { ContentMenu } from './components/ContentMenu';

export function AppSettings(): ReactElement {
export default function AppSettings(): ReactElement {
const { t } = useTranslation();

return (
Expand Down
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/overview/components/Overview.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { Overview } from './Overview';
import Overview from './Overview';
import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
import { renderWithProviders } from '../../../test/testUtils';
import { textMock } from '@studio/testing/mocks/i18nMock';
Expand Down
4 changes: 2 additions & 2 deletions src/Designer/frontend/app-development/features/overview/components/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Deployments } from './Deployments';
import { Header } from './Header';
import { StudioPageImageBackgroundContainer } from '@studio/components';

export const Overview = () => {
export default function Overview() {
const { t } = useTranslation();

return (
Expand Down Expand Up @@ -43,4 +43,4 @@ export const Overview = () => {
</main>
</StudioPageImageBackgroundContainer>
);
};
}
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/processEditor/ProcessEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { ProcessEditor } from './ProcessEditor';
import ProcessEditor from './ProcessEditor';
import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
import { renderWithProviders } from '../../test/testUtils';
import { QueryKey } from 'app-shared/types/QueryKey';
Expand Down
4 changes: 2 additions & 2 deletions src/Designer/frontend/app-development/features/processEditor/ProcessEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import type { OnProcessTaskEvent } from '@altinn/process-editor/types/OnProcessT
import { OnProcessTaskAddHandler } from './handlers/OnProcessTaskAddHandler';
import { OnProcessTaskRemoveHandler } from './handlers/OnProcessTaskRemoveHandler';

export const ProcessEditor = (): React.ReactElement => {
export default function ProcessEditor(): React.ReactElement {
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Export change correctly enables lazy loading.

The conversion from named arrow function export to default function export is appropriate for enabling React.lazy() dynamic imports as per the PR objectives. The syntax is correct.

However, this is a breaking change for any code that imports this component using a named import.

Run the following script to verify that all imports have been updated to default imports and that no stale named imports remain:

Also applies to: 136-136

🏁 Script executed:

#!/bin/bash
# Description: Verify all imports of ProcessEditor from this file use default import syntax.
# Expected: Only default imports or dynamic imports (React.lazy).

# Search for any remaining named imports of ProcessEditor from this specific file path
rg -n --type=ts --type=tsx -C3 "import\s*\{\s*ProcessEditor\s*\}" | rg -C3 "features/processEditor"

# Also check for any index file that might still be re-exporting this component
fd -e ts -e tsx "index" -x rg -l "ProcessEditor" {} | xargs rg -n "export.*ProcessEditor.*from.*['\"]\.\/ProcessEditor"

Length of output: 179

🏁 Script executed:

#!/bin/bash
# Description: Verify all imports of ProcessEditor from features/processEditor directory.
# Fixed version with correct rg syntax and file types.

echo "=== Searching for named imports of ProcessEditor ==="
rg -n --type=ts -C3 'import\s*\{\s*ProcessEditor\s*\}' 

echo ""
echo "=== Searching for default imports of ProcessEditor ==="
rg -n --type=ts -C3 'import.*ProcessEditor.*from' | grep -i "features/processEditor"

echo ""
echo "=== Searching for React.lazy imports of ProcessEditor ==="
rg -n --type=ts -C3 'React\.lazy.*ProcessEditor'

echo ""
echo "=== Searching for index files exporting ProcessEditor ==="
fd -e ts -e js "index" | xargs rg -n "export.*ProcessEditor" 2>/dev/null || echo "No index file exports found"

Length of output: 3276

🏁 Script executed:

#!/bin/bash
# Description: Find where ProcessEditor is used, especially with React.lazy

echo "=== Searching for files importing from app-development/features/processEditor ==="
rg -n --type=ts -C3 "from.*['\"].*features/processEditor['\"]" | head -50

echo ""
echo "=== Searching for React.lazy usage in the codebase ==="
rg -n --type=ts 'React\.lazy' | head -30

echo ""
echo "=== Checking what imports the index.ts file ==="
rg -n --type=ts "from.*['\"].*features/processEditor/index['\"]" 

echo ""
echo "=== Looking at the index.ts file content ==="
cat "src/Designer/frontend/app-development/features/processEditor/index.ts"

Length of output: 1488

🏁 Script executed:

#!/bin/bash
# Description: Get exact import and usage of ProcessEditor in routes.tsx

echo "=== Full context around React.lazy(ProcessEditor) in routes.tsx ==="
sed -n '1,20p' "src/Designer/frontend/app-development/router/routes.tsx"

Length of output: 1147

🏁 Script executed:

#!/bin/bash
# Description: Confirm if index.ts file is imported anywhere

echo "=== Searching for imports from processEditor index file ==="
rg -n --type=ts "from.*['\"].*processEditor['\"]" | grep -v "ProcessEditor.tsx" | grep -v "ProcessEditor.test"

echo ""
echo "=== Checking all variants of index imports ==="
rg -n --type=ts "from.*['\"]app-development/features/processEditor['\"]"

Length of output: 107

Fix index.ts re-export to match new default export pattern.

The export style change to default function is correctly applied and routes.tsx correctly imports directly from the component file. However, src/Designer/frontend/app-development/features/processEditor/index.ts contains export * from './ProcessEditor', which cannot re-export default exports in ES modules and will break any code attempting to import via the index path.

Update the index file to:

export { default } from './ProcessEditor';

or alternatively:

export { default as ProcessEditor } from './ProcessEditor';
🤖 Prompt for AI Agents 
In
src/Designer/frontend/app-development/features/processEditor/ProcessEditor.tsx
around line 26, the component was changed to a default export but the package
index re-export uses `export * from './ProcessEditor'`, which cannot re-export
default ES module exports; update
src/Designer/frontend/app-development/features/processEditor/index.ts to
explicitly re-export the default (for example use an `export { default } from
'./ProcessEditor'` or `export { default as ProcessEditor } from
'./ProcessEditor'`) so imports via the index path resolve correctly.

const { t } = useTranslation();
const { org, app } = useStudioEnvironmentParams();
const { data: currentPolicy, isPending: isPendingCurrentPolicy } = useAppPolicyQuery(org, app);
Expand Down Expand Up @@ -133,4 +133,4 @@ export const ProcessEditor = (): React.ReactElement => {
onProcessTaskRemove={onProcessTaskRemove}
/>
);
};
}
1 change: 0 additions & 1 deletion src/Designer/frontend/app-development/features/processEditor/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/textEditor/TextEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { renderWithProviders } from '../../test/testUtils';
import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
import { screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
import React from 'react';
import { TextEditor } from './TextEditor';
import TextEditor from './TextEditor';
import { textMock } from '@studio/testing/mocks/i18nMock';
import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
import userEvent from '@testing-library/user-event';
Expand Down
4 changes: 2 additions & 2 deletions src/Designer/frontend/app-development/features/textEditor/TextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen
import { useTranslation } from 'react-i18next';
import { useUpsertTextResourceMutation } from 'app-shared/hooks/mutations/useUpsertTextResourceMutation';

export const TextEditor = () => {
export default function TextEditor() {
const { t } = useTranslation();
const { org, app } = useStudioEnvironmentParams();
const [searchParams, setSearchParams] = useSearchParams({ lang: '', search: '' });
Expand Down Expand Up @@ -67,4 +67,4 @@ export const TextEditor = () => {
upsertTextResource={upsertTextResource}
/>
);
};
}
2 changes: 1 addition & 1 deletion src/Designer/frontend/app-development/features/uiEditor/UiEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { QueryKey } from 'app-shared/types/QueryKey';
import type { AppVersion } from 'app-shared/types/AppVersion';
import { app, org } from '@studio/testing/testids';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { UiEditor } from './UiEditor';
import UiEditor from './UiEditor';
import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
import { renderWithProviders } from '../../test/testUtils';

Expand Down
4 changes: 2 additions & 2 deletions src/Designer/frontend/app-development/features/uiEditor/UiEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
import { MAXIMUM_SUPPORTED_FRONTEND_VERSION } from 'app-shared/constants';
import { isBelowSupportedVersion } from 'app-shared/utils/compareFunctions';

export const UiEditor = () => {
export default function UiEditor() {
const { org, app } = useStudioEnvironmentParams();
const { t } = useTranslation();
const { data: version, isPending: fetchingVersionIsPending } = useAppVersionQuery(org, app);
Expand Down Expand Up @@ -43,4 +43,4 @@ export const UiEditor = () => {
);

return isLatestFrontendVersion ? renderUiEditorContent() : <UiEditorV3 />;
};
}
9 changes: 7 additions & 2 deletions src/Designer/frontend/app-development/router/PageRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Suspense } from 'react';
import {
RouterProvider,
createBrowserRouter,
Expand All @@ -19,6 +19,7 @@ import {
} from './PageRouterErrorBoundry';
import { GiteaRoutePaths } from '../enums/GiteaRoutePaths';
import { NavigateToLatestCommitInGitea } from '../features/navigateToLatestCommitInGitea';
import { StudioPageSpinner } from '@studio/components';

const BASE_PATH = '/:org/:app';

Expand All @@ -36,7 +37,11 @@ const router = createBrowserRouter(
<Route
key={route.path}
path={route.path}
element={<route.subapp />}
element={
<Suspense fallback={<StudioPageSpinner spinnerTitle='' />}>
<route.subapp />
</Suspense>
}
errorElement={<RouteErrorBoundary />}
/>
))}
Expand Down
25 changes: 16 additions & 9 deletions src/Designer/frontend/app-development/router/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import { Overview } from '../features/overview/components/Overview';
import { TextEditor } from '../features/textEditor/TextEditor';
import DataModellingContainer from '../features/dataModelling/containers/DataModellingContainer';
import { DeployPage } from '../features/appPublish/pages/DeployPage';
import { ProcessEditor } from 'app-development/features/processEditor';
import React from 'react';
import { RoutePaths } from 'app-development/enums/RoutePaths';
import { AppContentLibrary } from 'app-development/features/appContentLibrary';
import { UiEditor } from 'app-development/features/uiEditor/UiEditor';
import { AppSettings } from 'app-development/features/appSettings/AppSettings';
import { AiAssistant } from 'app-development/features/aiAssistant/AiAssistant';
const Overview = React.lazy(() => import('app-development/features/overview/components/Overview'));
const DataModellingContainer = React.lazy(
() => import('app-development/features/dataModelling/containers/DataModellingContainer'),
);
const DeployPage = React.lazy(() => import('app-development/features/appPublish/pages/DeployPage'));
const ProcessEditor = React.lazy(
() => import('app-development/features/processEditor/ProcessEditor'),
);
const AppContentLibrary = React.lazy(
() => import('app-development/features/appContentLibrary/AppContentLibrary'),
);
const AppSettings = React.lazy(() => import('app-development/features/appSettings/AppSettings'));
const TextEditor = React.lazy(() => import('app-development/features/textEditor/TextEditor'));
const AiAssistant = React.lazy(() => import('app-development/features/aiAssistant/AiAssistant'));
const UiEditor = React.lazy(() => import('app-development/features/uiEditor/UiEditor'));

interface RouterRoute {
path: string;
Expand Down
Loading