Fix infinite loop with layout cards module

src/core/card/Card.tsx

@@ -131,6 +131,7 @@ export function Card({
       >
         <div
           className={classNames(
+            styles.content,
             backgroundColor
               ? colorStyles[`background${getColor(backgroundColor)}`]
               : isDelimited && colorStyles.backgroundFog,

src/core/card/card.module.scss

@@ -243,6 +243,12 @@
     }
   }
 
+  .content {
+    @include respond_above(s) {
+      min-height: var(--height-image-desktop);
+    }
+  }
+
   .textWrapper {
     display: flex;
     flex-direction: column;

src/core/pageContent/PageContent.tsx

@@ -39,6 +39,7 @@ import { CardModule } from '../pageModules/CardModule/CardModule';
 import { CardsModule } from '../pageModules/CardsModule/CardsModule';
 import { ImageModule } from '../pageModules/ImageModule/ImageModule';
 import { StepsModule } from '../pageModules/StepsModule/StepsModule';
+import createHashKey from '../utils/createHashKey';
 
 export type PageContentProps = {
   page?: PageType | ArticleType;
@@ -67,17 +68,20 @@ export const defaultContentModules = (
   page: PageType | ArticleType,
 ): React.ReactNode[] => {
   const contentModules: React.ReactNode[] = [];
-  page?.modules?.map((module) => {
+  page?.modules?.map((module, index) => {
+    const uniqueKey = createHashKey(`${index}-${JSON.stringify(module)}`);
     if (isLayoutContent(module)) {
       contentModules.push(
         <ContentModule
+          key={uniqueKey}
           content={module.content}
           backgroundColor={module.backgroundColor}
         />,
       );
     } else if (isLayoutCard(module)) {
       contentModules.push(
         <CardModule
+          key={uniqueKey}
           title={module.title}
           text={module.description}
           backgroundColor={module.backgroundColor}
@@ -91,12 +95,13 @@ export const defaultContentModules = (
         />,
       );
     } else if (isLayoutCards(module)) {
-      contentModules.push(<CardsModule items={module.cards} />);
+      contentModules.push(<CardsModule key={uniqueKey} items={module.cards} />);
     } else if (isLayoutImage(module)) {
-      contentModules.push(<ImageModule />);
+      contentModules.push(<ImageModule key={uniqueKey} />);
     } else if (isLayoutSteps(module)) {
       contentModules.push(
         <StepsModule
+          key={uniqueKey}
           title={module.title}
           steps={module.steps.map((step) => ({
             title: step.title,

src/core/pageModules/CardsModule/CardsModule.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import styles from '../pageModules.module.scss';
 import { SimpleCard } from './SimpleCard';
+import createHashKey from '../../utils/createHashKey';
 
 type Card = {
   backgroundColor?: string;
@@ -32,18 +33,25 @@ export function CardsModule({ items }: CardsModuleProps) {
         items.length === 1 && styles.singleGridWrapper,
       )}
     >
-      {items?.map((card) => (
-        <SimpleCard
-          title={card.title}
-          description={card.description}
-          linkTarget={card.link.target}
-          linkTitle={card.link.title}
-          linkUrl={card.link.url}
-          backgroundColor={card.backgroundColor}
-          direction={items.length === 1 ? 'horisontal' : 'vertical'}
-          icon={card.icon}
-        />
-      ))}
+      {items?.map((card, index) => {
+        // The card module does not contain any proeprty that could be used as an unique id, so one needs to be created
+        const uniqueKey = createHashKey(
+          `${index}-${card.title}-${card.description}`,
+        );
+        return (
+          <SimpleCard
+            key={uniqueKey}
+            title={card.title}
+            description={card.description}
+            linkTarget={card.link.target}
+            linkTitle={card.link.title}
+            linkUrl={card.link.url}
+            backgroundColor={card.backgroundColor}
+            direction={items.length === 1 ? 'horisontal' : 'vertical'}
+            icon={card.icon}
+          />
+        );
+      })}
     </div>
   );
 }

src/core/pageModules/CardsModule/Icon.tsx

@@ -9,10 +9,14 @@ type IconProps = {
 export function Icon({ name }: IconProps) {
   // eslint-disable-next-line react/jsx-no-useless-fragment
   const fallback = () => <div />;
-  const IconComponent = React.lazy(() =>
-    import('../../../common/components/icons').then((module) => ({
-      default: module[name] || fallback,
-    })),
+  const IconComponent = React.useMemo(
+    () =>
+      React.lazy(() =>
+        import('../../../common/components/icons').then((module) => ({
+          default: module[name] || fallback,
+        })),
+      ),
+    [name],
   );
   return (
     <Suspense fallback={<div className={styles.fallbackIcon} />}>

src/core/pageModules/StepsModule/StepsModule.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import styles from '../pageModules.module.scss';
 import colorStyles from '../../styles/background.module.scss';
 import { getColor, getTextFromHtml, isWhiteText } from '../../utils/string';
+import createHashKey from '../../utils/createHashKey';
 
 export type Step = {
   content: string;
@@ -29,6 +30,16 @@ export function StepsModule({
   type,
   className,
 }: StepsModuleProps) {
+  const stepsContents = steps?.map((step, index) => {
+    // The card module does not contain any proeprty that could be used as an unique id, so one needs to be created
+    const uniqueKey = createHashKey(`${index}-${step.title}-${step.content}`);
+    return {
+      key: uniqueKey,
+      title: step.title,
+      description: getTextFromHtml(step.content),
+    };
+  });
+
   return (
     <div className={styles.pageModuleWrapper}>
       <StepByStep
@@ -40,10 +51,7 @@ export function StepsModule({
           className,
         )}
         helpText={getTextFromHtml(helpText)}
-        steps={steps?.map((step) => ({
-          title: step.title,
-          description: getTextFromHtml(step.content),
-        }))}
+        steps={stepsContents}
         title={title}
       />
     </div>

src/core/utils/createHashKey.ts

@@ -0,0 +1,5 @@
+const MAX_KEY_LENGTH = 200;
+export default function createHashKey(source: string | object) {
+  const data = typeof source === 'string' ? source : JSON.stringify(source);
+  return btoa(unescape(encodeURIComponent(data))).substring(0, MAX_KEY_LENGTH);
+}