Experiment: List prefetching + spinner

src/global.ts

@@ -42,6 +42,8 @@ declare global {
     conditionalRuleHandlerObject: IRuleObject;
     ruleHandlerObject: IRuleObject;
 
+    listPrefetchingEnabled: boolean | undefined;
+
     /**
      * In React components, hierarchy generators, or other places that are run continuously, use window.logErrorOnce() instead
      * @see window.logErrorOnce

src/layout/List/ListComponent.tsx

@@ -13,6 +13,7 @@ import {
 import cn from 'classnames';
 
 import { Pagination as CustomPagination } from 'src/app-components/Pagination/Pagination';
+import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { Description } from 'src/components/form/Description';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { RequiredIndicator } from 'src/components/form/RequiredIndicator';
@@ -74,7 +75,7 @@ export const ListComponent = ({ baseComponentId }: PropsFromGenericComponent<'Li
     sortDirection,
   };
 
-  const { data } = useDataListQuery(filter, dataListId, secure, mapping, queryParameters);
+  const { data, isFetching } = useDataListQuery(filter, dataListId, secure, mapping, queryParameters);
   const bindings = item.dataModelBindings ?? ({} as IDataModelBindingsForList);
 
   // Determine selection mode based on bindings
@@ -171,6 +172,10 @@ export const ListComponent = ({ baseComponentId }: PropsFromGenericComponent<'Li
     required,
   });
 
+  if (isFetching) {
+    return <AltinnSpinner />;
+  }
+
   if (isMobile && !readOnly) {
     return (
       <ComponentStructureWrapper baseComponentId={baseComponentId}>

src/utils/layout/generator/NodeGenerator.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import type { PropsWithChildren } from 'react';
 
+import { useDataListQuery } from 'src/features/dataLists/useDataListQuery';
 import { evalExpr } from 'src/features/expressions';
 import { ExprVal } from 'src/features/expressions/types';
 import { ExprValidation } from 'src/features/expressions/validation';
@@ -11,6 +12,7 @@ import { useGeneratorErrorBoundaryNodeRef } from 'src/utils/layout/generator/Gen
 import { WhenParentAdded } from 'src/utils/layout/generator/GeneratorStages';
 import { NodePropertiesValidation } from 'src/utils/layout/generator/validation/NodePropertiesValidation';
 import { NodesInternal, NodesStore } from 'src/utils/layout/NodesContext';
+import { useExpressionDataSources } from 'src/utils/layout/useExpressionDataSources';
 import type { SimpleEval } from 'src/features/expressions';
 import type { ExprResolved, ExprValToActual, ExprValToActualOrExpr } from 'src/features/expressions/types';
 import type { FormComponentProps, SummarizableComponentProps } from 'src/layout/common.generated';
@@ -19,6 +21,7 @@ import type {
   CompExternalExact,
   CompIntermediate,
   CompIntermediateExact,
+  CompInternal,
   CompTypes,
   ITextResourceBindings,
 } from 'src/layout/layout';
@@ -55,6 +58,9 @@ export function NodeGenerator({ children, externalItem }: PropsWithChildren<Node
         parentBaseId={externalItem.id}
         item={intermediateItem}
       >
+        {intermediateItem.type === 'List' && window.listPrefetchingEnabled !== false && (
+          <PrefetchListData item={intermediateItem} />
+        )}
         <WhenParentAdded>
           <NodePropertiesValidation
             {...commonProps}
@@ -143,6 +149,27 @@ function AddRemoveNode<T extends CompTypes>({
   return null;
 }
 
+function PrefetchListData({ item }: { item: CompIntermediateExact<'List'> }) {
+  const dataSources = useExpressionDataSources(item);
+  const props = useExpressionResolverProps<'List'>(`Invalid expression for ${item.id}`, item, dataSources);
+  const resolvedItem = getComponentDef('List').evalExpressions(props) as CompInternal<'List'>;
+
+  useDataListQuery(
+    {
+      pageSize: resolvedItem.pagination?.default ?? 0,
+      pageNumber: 0,
+      sortColumn: undefined,
+      sortDirection: 'none',
+    },
+    resolvedItem.dataListId,
+    resolvedItem.secure,
+    resolvedItem.mapping,
+    resolvedItem.queryParameters,
+  );
+
+  return null;
+}
+
 /**
  * Creates props for the expression resolver that can be used to evaluate expressions in a component configuration.
  * These props are passed on to your component's `evalExpressions` method.