chore: move AltinnContentLoader (#13932)

frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AltinnContentLoader } from './AltinnContentLoader';
+
+describe('AltinnContentLoader', () => {
+  it('should render with default height and width', () => {
+    render(<AltinnContentLoader />);
+
+    const loader = screen.getByRole('img', { hidden: true });
+    expect(loader).toHaveAttribute('height', '200');
+    expect(loader).toHaveAttribute('width', '400');
+  });
+
+  it('should render with custom height and width', () => {
+    render(<AltinnContentLoader height={300} width={500} />);
+
+    const loader = screen.getByRole('img', { hidden: true });
+    expect(loader).toHaveAttribute('height', '300');
+    expect(loader).toHaveAttribute('width', '500');
+  });
+
+  it('should render children', () => {
+    render(
+      <AltinnContentLoader>
+        <rect x='0' y='0' width='100' height='100' />
+      </AltinnContentLoader>,
+    );
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+});

frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx → frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx

@@ -1,21 +1,13 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactElement } from 'react';
 import type { IContentLoaderProps } from 'react-content-loader';
 import ContentLoader from 'react-content-loader';
 
-export type IAltinnContentLoaderProps = {
-  /** The height of the loader, defaults to 200 */
-  height?: number;
-  /** The width of the loader, defaults to 400 */
-  width?: number;
-  children: ReactNode;
-} & IContentLoaderProps;
-
 export const AltinnContentLoader = ({
   height,
   width,
   children,
   ...rest
-}: IAltinnContentLoaderProps) => {
+}: IContentLoaderProps): ReactElement => {
   return (
     <ContentLoader height={height ? height : 200} width={width ? width : 400} {...rest}>
       {children}

frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts

@@ -0,0 +1 @@
+export { AltinnContentLoader } from './AltinnContentLoader';

frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import classes from './DeploymentContainer.module.css';
-import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader';
+import { AltinnContentLoader } from '../components/AltinnContentLoader';
 import {
   useOrgListQuery,
   useEnvironmentsQuery,

frontend/app-development/features/appPublish/pages/DeployPage.tsx

@@ -5,7 +5,7 @@ import { InfoCard } from '../components/InfoCard';
 import { ReleaseContainer } from '../containers/ReleaseContainer';
 import { useDeployPermissionsQuery, useOrgListQuery } from '../../../hooks/queries';
 import { Trans, useTranslation } from 'react-i18next';
-import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader';
+import { AltinnContentLoader } from '../components/AltinnContentLoader';
 import { useInvalidator } from '../../../hooks/useInvalidator';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { Link } from '@digdir/designsystemet-react';