@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_patterns-loading-docs.md

@@ -0,0 +1,1908 @@
+Loading
+=======
+
+Overview
+--------
+
+The loading pattern is used to indicate that content is being loaded or processed consistently across Iress products. It can be used in various scenarios, such as loading entire applications, pages, components or server-side validation.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading--wizard)
+
+Hide codeRefresh
+
+interface PageProps {
+  setPage: (page: number) \=> void;
+}
+interface ChartProps {
+  money: number | null;
+}
+const API \= {
+  initialise: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 3000);
+    }),
+  data: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+  chart: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+const Chart \= () \=> {
+  const \[chart, setChart\] \= useState(false);
+  const \[money, setMoney\] \= useState<number | null\>(null);
+  const \[loaded, setLoaded\] \= useState(false);
+  const \[updating, setUpdating\] \= useState(false);
+  const safeLoaded \= IressLoading.shouldRender(loaded);
+  const deferredMoney \= useDeferredValue(money);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newChart \= await API.chart();
+      setChart(newChart);
+      setLoaded(() \=> true);
+    };
+    void initialise();
+  }, \[\]);
+  useEffect(() \=> {
+    if (deferredMoney \=== null) {
+      return;
+    }
+    const update \= async () \=> {
+      setUpdating(() \=> true);
+      const newChart \= await API.chartUpdate();
+      setChart(newChart);
+      setUpdating(() \=> false);
+    };
+    void update();
+  }, \[deferredMoney\]);
+  return (
+    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
+      {chart && <Graph />}
+      <IressPanel\>
+        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
+        >          <IressStack gap\="md"\>
+            <h3\>Update projection</h3\>
+            <IressFormField
+              name\="money"
+              label\="My money"
+              render\={(controlledProps) \=> (
+                <IressInputCurrency {...controlledProps} />
+              )}
+            />
+            <IressButton type\="submit"\>Update projection</IressButton\>
+          </IressStack\>
+        </IressForm\>
+      </IressPanel\>
+    </IressLoading\>
+  );
+};
+const StartPage \= ({ setPage }: PageProps) \=> (
+  <IressText\>
+    <h2\>Maximise your retirement</h2\>
+    <p\>
+      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
+    <hr />
+    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
+  </IressText\>
+);
+const RetirementIncomeProjectionPage \= () \=> {
+  const \[data, setData\] \= useState(false);
+  const loaded \= data !== false;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newData \= await API.data();
+      setData(newData);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
+  }
+  return (
+    <IressText\>
+      <h2\>Retirement Income Projection</h2\>
+      <p\>
+        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
+      <Chart />
+    </IressText\>
+  );
+};
+export const LoadingWizard \= () \=> {
+  const \[page, setPage\] \= useState(0);
+  const loaded \= page \> 0;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      await API.initialise();
+      setPage(1);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="start-up" loaded\={loaded} />;
+  }
+  return (
+    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
+      {page \=== 1 && <StartPage setPage\={setPage} />}
+      {page \=== 2 && <RetirementIncomeProjectionPage />}
+    </IressContainer\>
+  );
+};
+
+```
+
+Props
+-----
+
+Usage
+-----
+
+The main prop for the `IressLoading` component is the `pattern` prop. This prop determines the type of loading pattern to be used. The available options are:
+
+1.  `component`: This pattern is used to indicate that a specific component is loading. It is typically used when the there is a slower compoent on the page that requires its own loading state. Examples include:
+    *   Loading a table with a large number of rows
+    *   Loading a chart with a large number of data points
+2.  `default`: This pattern is used when no other pattern matches a scenario, and will only indicate loading if something is taking a long time to load. It is used when long loading times are not expected. Examples include:
+    *   Navigation
+3.  `long`: Loading pattern for a component that is expected to take longer than 10 seconds to load. It displays a checklist of items that are being loaded. Examples:
+    *   Calling multiple slow APIs to load data
+    *   Loading results from AI
+    *   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
+4.  `page`: This pattern is used to indicate that a page is loading. It is the most common loading pattern, allowing the users to see the entire content at once where possible. Examples include:
+    *   Detail page for a record
+    *   Form/Article page
+    *   Dashboard page
+5.  `start-up`: This pattern is used to indicate that the application is loading. It is typically used when the application is first launched. Examples include:
+    *   Loading a new application
+    *   Switching from a different application to a new application
+    *   Switching from a client's website to an Iress application
+    *   Switching themes
+6.  `validate`: This pattern is used to indicate that a server-side validation is in progress. It is typically used when the user is submitting a form or performing an action that requires validation. Examples include:
+    *   Submitting a form
+    *   Saving a record
+
+It is **recommended** to read the Patterns section of the documentation to understand how to use the loading patterns effectively.
+
+### Be consistent
+
+Apart from using the `IressLoading` component, there are a few things you need to do to ensure you are using the loading patterns correctly to ensure consistency across Iress products.
+
+*   Consider the difference between what the system is doing and what the user is doing. For example, when a user is submitting a form, the system may be calling different APIs and you may be tempted to use the different loading patterns for each API. However, the user is only submitting the form once, so you should only use one loading pattern for the entire form submission process. In most cases, it will be the `page` loading pattern.
+*   When switch between different applications, consider using the same loading pattern. This will help mask the loading time and improve the user experience.
+
+Behaviour
+---------
+
+The `IressLoading` component is designed to create a seamless experience for users when loading content. They have been designed to meet best practices and improve user perception of loading times.
+
+![Wait times less than 1 second, no loading indicator. Short wait times (1-3 seconds), use a loading indicator. Long wait times (3-10 seconds), use a loading indicator and provide feedback. Wait times longer than 10 seconds should be a background process.](/src/patterns/Loading/assets/ux-collective-loading-time-matrix.webp)
+
+Image © [UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a)
+
+* * *
+
+To match the above image, the default behaviour of the loading patterns are as follows:
+
+*   Between 0 - 500ms: No loading indicator, it will be assumed that the content is already loaded.
+*   Between 500ms - 2 seconds: A loading indicator will animate in. It will either be a skeleton or a progress bar.
+*   Between 2 - 5 seconds: A loading message will animate in.
+*   Between 5 - 10 seconds: Some components support additional loading messages. These will animate in and out to indicate that the content is still loading and as well as give the user the perception something is happening in the background.
+*   After 10 seconds: Components display a list of messages to indicate what actions the system is doing to complete the user's request. These are checked off as they are completed. This is to give the user the perception that something is happening in the background and to keep them informed of what is happening.
+
+In future releases, we will be adding support for the following:
+
+*   After 10 seconds (background): it is always best not to block the user from using the application even if the system is busy. This will be a future feature of the `long` loading pattern.
+
+* * *
+
+The `IressLoading` patterns have been built using `IressSkeleton`, `IressSpinner` and `IressProgressBar` and other components, reducing the need to create custom loading components.
+
+Patterns
+--------
+
+### `component`
+
+The `component` loading pattern is used to indicate that a specific component is loading. It is typically used when the there is a slower component on the page that requires its own loading state. You would usually use this pattern when loading data visualisations such as charts and tables.
+
+#### Behavior
+
+1.  When `loaded` is false, a skeleton will be displayed immediately (configured using `timeout.skeleton`). This skeleton can be customised using the `template` prop.
+2.  When `loaded` is true, the skeleton will be removed and the `children` will be displayed.
+3.  When `updated` is true, the `children` will be faded out to indicate the component is loading.
+4.  After 1000ms (configured using `timeout.update`), the `Updating...` message will be fade in. This message can be customised using the `updated` prop.
+
+#### Custom skeletons
+
+The skeleton representing the component should be as simple as possible, it does not need to be a perfect representation of the component. In most cases a simple rectangle is sufficient that takes up the approximate same space as the component that is loading.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-component--component)
+
+![](/src/patterns/Loading/mocks/retirement-graph.png)
+
+Update
+
+Hide codeRefresh
+
+const API \= {
+  chart: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+export const LoadingGraph \= () \=> {
+  const \[graph, setGraph\] \= useState(false);
+  const \[updating, setUpdating\] \= useState(false);
+  const renderLoading \= IressLoading.shouldRender(graph);
+  const doUpdate \= useCallback(() \=> {
+    const update \= async () \=> {
+      await API.chartUpdate();
+      setUpdating(false);
+    };
+    setUpdating(true);
+    void update();
+  }, \[\]);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      setGraph(await API.chart());
+    };
+    void initialise();
+  }, \[\]);
+  return (
+    <IressLoading
+      pattern\="component"
+      template\="chart"
+      loaded\={!renderLoading}
+      update\={updating}
+    \>
+      <IressStack gap\="md" style\={{ display: 'inline-block' }}\>
+        <div\>
+          <Graph />
+        </div\>
+        <IressButton onClick\={doUpdate}\>Update</IressButton\>
+      </IressStack\>
+    </IressLoading\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+The chart that is being loaded for the first time or being refreshed/updated.
+
+ReactNode
+
+
+
+ | \- | \- |
+| loaded | 
+
+If set to `true`, will hide the skeleton and display the chart.
+
+boolean
+
+
+
+ | \- | \- |
+| pattern | 
+
+Use `pattern="component"` for the following use cases:
+
+*   Component that is expected to be slow to load, such as a chart, table or large graphic.
+*   Component that can be refreshed/updated with new data.
+
+literal
+
+
+
+ | \- | \- |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `message` after the delay.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | \- |
+| template | 
+
+Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+
+union
+
+
+
+ | 
+
+'chart'
+
+ | \- |
+| timeout | 
+
+Set the timeouts for showing the skeleton and update messages.
+
+{ /\*\* \* The time in milliseconds before the skeleton is displayed. \* @default 0 \*/ skeleton?: number; /\*\* \* The time in milliseconds before the update message is displayed. \* @default 1000 \*/ update?: number; }
+
+ | \- | \- |
+| update | 
+
+Set the chart to be updated. If a `ReactNode` is provided, it will be displayed as the message. If set to `true`, will display the default message `Updating...`.
+
+ReactNode
+
+
+
+ | \- | \- |
+
+### `default`
+
+The `default` loading pattern is used when no other pattern matches a scenario, and will only indicate loading if something is taking a long time to load. It is used when long loading times are not expected.
+
+This pattern is used when the user is navigating between different pages or sections of the application.
+
+#### Behavior
+
+1.  Displays nothing by default
+    
+2.  After 3000ms (configured using `timeout`), the `This is taking longer than expected...` message will be slide in from top center. This message can be customised using the `children` prop.
+    
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-default--default)
+
+This is taking longer than expected...
+
+Hide codeRefresh
+
+<IressLoading pattern\="default" />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Message to display when the loading time is longer than expected.
+
+ReactNode
+
+
+
+ | 
+
+<IressInline />
+
+
+
+ | Set object |
+| pattern | 
+
+Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time. Example use cases:
+
+*   Navigating between different routes
+*   Calling an API within the page that does not require a loading state
+
+literal
+
+
+
+ | \- | 
+
+"default"
+
+ |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `children` message after the delay.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | Set object |
+| timeout | 
+
+Delay in milliseconds before the message is displayed.
+
+number
+
+
+
+ | 
+
+3000
+
+ | Set number |
+
+### `long`
+
+The `long` loading pattern is used to indicate an expected long loading time, usually longer than 10 seconds to complete. It is typically used when calling multiple third-party APIs, AI generation and other long running tasks.
+
+It has a required prop, `messageList`, which is an object map where the key is the time you want the message to be marked as completed and the value is the message to display. The messages will be completed (checked off) as the time elapses.
+
+#### Behavior
+
+1.  When `loaded` is false, a progress bar and check list will be displayed after 500ms (configured using `timeout.message`). This progress bar can be customised using the `renderProgress` prop.
+2.  The messages will rotate until the `loaded` prop is set to true.
+    *   When a message falls within its elapsed time, it will be displayed with an animated ellipsis, indicating that the system is still working on it.
+    *   When a message is completed, it will be displayed with a check mark.
+3.  When `loaded` is true, all items in the checklist are completed and the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
+4.  When `error` is true, the error message will be displayed, overriding the progress bar and checklist. This message can be customised using the `error` prop. The error message will be displayed with a red background.
+
+#### Adjusting the progress bar
+
+The `long` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
+
+If your application is capable of calculating real progress, you can pass the `progress` prop to the `IressLoading` component and that value will be used instead.
+
+Once the `loaded` prop is set to true, the progress bar will always be set to 100% and the loading pattern will fade out.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-long--long)
+
+*   Finished: Processing transcript
+*   Finished: Noting key information
+*   Finished: Generating summary
+    
+    ...
+    
+
+Hide codeRefresh
+
+<IressLoading
+  messageList\={{
+    '3000': 'Processing transcript',
+    '5000': 'Noting key information',
+    '7000': 'Generating summary'
+  }}
+  pattern\="long"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The children are displayed while loading. This will be displayed above the progress bar and checklist.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| error | 
+
+An error to display if the loading fails. This will override the `messageList` and show an error message instead.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| estimatedFinishTime | 
+
+Estimated time in milliseconds for the loading to finish.
+
+number
+
+
+
+ | 
+
+10000
+
+ | Set number |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| messageList | 
+
+A checklist to display while loading. The key is the time when you want the item to be checked.
+
+Record<number, ReactNode>
+
+ | { } | 
+
+RAW
+
+messageList :
+
+{
+
+*   3000 : "Processing transcript"
+*   5000 : "Noting key information"
+*   7000 : "Generating summary"
+
+}
+
+
+
+
+
+
+
+ |
+| pattern | 
+
+The long loading pattern will display a checklist of items that are being loaded.
+
+Use `pattern="long"` for the following use cases:
+
+*   Calling multiple slow APIs to load data
+*   Loading results from AI
+*   Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
+
+literal
+
+
+
+ | \- | 
+
+"long"
+
+ |
+| progress | 
+
+If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+
+IressProgressProps\['value'\]
+
+ | \- | Set object |
+| renderProgress | 
+
+This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+
+( props: Pick<IressProgressProps, 'max' | 'sectionTitle' | 'value'>, ) => ReactNode
+
+ | 
+
+element
+
+
+
+ | \- |
+| timeout | 
+
+Set the timeouts for showing the progress bar and message.
+
+{ /\*\* \* The time in milliseconds before this component begins to fade out (if \`loaded\` is set to \`true\`). \* @default 1300 \*/ loaded?: number; /\*\* \* The time in milliseconds before the checklist is displayed. \* @default 500 \*/ message?: number; }
+
+ | \- | Set object |
+
+### `page`
+
+The `page` loading pattern is used to indicate that a page is loading. It is the most common loading pattern, allowing the users to see the entire content at once where possible.
+
+#### Behavior
+
+1.  When `loaded` is false, a skeleton will be displayed after 500ms (configured using `timeout`). This skeleton can be customised using the `template` prop.
+2.  If `critical` is set whilst `loaded` is false, the critical content will be displayed immediately. This is useful for showing critical content while the rest of the page is loading.
+3.  When `loaded` is true, the skeleton will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
+
+#### Custom skeletons
+
+The skeleton does not need to be a perfect representation of the page. It is recommended to follow the guidelines below when creating custom `template` skeletons:
+
+*   If there are multiple rows, only create a skeleton of the first row. This is enough to give the user an idea of what the content will look like.
+*   If there are multiple filters, only create a few filters in the general area where they will appear.
+*   For cards, keep the skeleton as simple as possible. It does not need to be a perfect representation of the card. In most cases a title, description and image is sufficient.
+
+For your convenience, we have provided a few templates that you can use in the `template` prop, including: `page`, `form` and `dashboard`.
+
+#### Critical content
+
+In some cases it may be useful to show critical content while the rest of the page is loading. This gives the user a preview of what to expect. The example below shows a loading page with critical content by using the `critical` prop.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-page--page)
+
+Dashboard
+=========
+
+* * *
+
+Financial update 2025
+---------------------
+
+The ASX update
+--------------
+
+In the news
+-----------
+
+Loading...
+
+Hide codeRefresh
+
+const API \= {
+  criticalContent: async () \=>
+    new Promise<ReactNode\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(
+          <IressContainer\>
+            <IressStack gap\="lg"\>
+              <IressRow horizontalAlign\="between" verticalAlign\="middle"\>
+                <IressText element\="h1" mb\="none"\>
+                  Dashboard                </IressText\>
+                <IressInline gap\="lg"\>
+                  <IressSkeleton textStyle\="typography.body.lg" width\="200px" />
+                  <IressSkeleton textStyle\="typography.body.lg" width\="200px" />
+                </IressInline\>
+              </IressRow\>
+              <IressDivider />
+              <IressRow gutter\="lg"\>
+                <IressCol span\="4"\>
+                  <IressCard
+                    stretch
+                    heading\="Financial update 2025"
+                    media\={<IressSkeleton mode\="rect" height\="300px" />}
+                  \>
+                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
+                  </IressCard\>
+                </IressCol\>
+                <IressCol span\="4"\>
+                  <IressCard
+                    stretch
+                    heading\="The ASX update"
+                    media\={<IressSkeleton mode\="rect" height\="300px" />}
+                  \>
+                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
+                  </IressCard\>
+                </IressCol\>
+                <IressCol span\="4"\>
+                  <IressCard
+                    stretch
+                    heading\="In the news"
+                    media\={<IressSkeleton mode\="rect" height\="300px" />}
+                  \>
+                    <IressSkeleton textStyle\="typography.body.md" width\="50%" />
+                  </IressCard\>
+                </IressCol\>
+              </IressRow\>
+            </IressStack\>
+          </IressContainer\>,
+        );
+      }, 3000);
+    }),
+};
+export const LoadingDashboard \= () \=> {
+  const \[critical, setCritical\] \= useState<ReactNode | undefined\>();
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      setCritical(await API.criticalContent());
+    };
+    void initialise();
+  }, \[\]);
+  return (
+    <IressLoading pattern\="page" critical\={critical} template\="dashboard" />
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| critical | 
+If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
+
+ReactNode
+
+
+
+ | \- | \- |
+| error | 
+
+An error to display if the loading fails. This will override the skeleton.
+
+ReactNode
+
+
+
+ | \- | \- |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | \- |
+| pattern | 
+
+Use `pattern="page"` for the following use cases:
+
+*   Detail page for a record
+*   Form page
+*   Article page
+
+literal
+
+
+
+ | \- | \- |
+| screenReaderText | 
+
+Only screen readers will see this message.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | \- |
+| template | 
+
+Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+
+union
+
+
+
+ | 
+
+'page'
+
+ | \- |
+| timeout | 
+
+Delay in milliseconds before the skeleton is displayed.
+
+number
+
+
+
+ | 
+
+500
+
+ | \- |
+
+### `start-up`
+
+The `start-up` loading pattern is used to indicate that the application is loading. It is typically used when the application is first launched. This pattern is used when the application is first launched or when switching from a different application to a new application. It is also used when switching from a client's website to an Iress application or switching themes.
+
+#### Behavior
+
+1.  When `loaded` is false, a progress bar will be displayed after 500ms (configured using `timeout.progress`). This progress bar can be customised using the `renderProgress` prop.
+2.  When `loaded` is false after 2.5 seconds (configured using `timeout.message`), the message will be displayed. This message can be customised using the `children` or `messageList` prop.
+3.  If using `messageList`, the messages will rotate until the `loaded` prop is set to true.
+4.  When `loaded` is true, the progress bar and message will begin fading out. To see the fade out, you will need to use the `IressLoading.shouldRender` hook.
+
+#### Adjusting the progress bar
+
+The `start-up` loading pattern uses a progress bar to indicate that the application is loading alongside an `estimatedFinishTime` prop. This prop is used to indicate the estimated time until the application is fully loaded, and is used to help the user understand how long they will need to wait and assure them something is happening. The progress bar will animate based on the estimated time.
+
+If your application is capable of calculating real progress, you can pass the `progress` prop to the `IressLoading` component and that value will be used instead.
+
+Once the `loaded` prop is set to true, the progress bar will always be set to 100% and the loading pattern will fade out.
+
+#### Rotating messages
+
+The start-up process is often used initialise the application and load any necessary data. This can include loading user preferences, settings, and any other data that is required to make using the application quicker and easier, however this may add burden to the loading time.
+
+To compensate for this, you can pass multiple messages to the pattern using the `messageList` prop. The `messageList` accepts an object map where the key is the time you want the message to start displaying (in milliseconsds) and the value is the message to display. The messages will rotate until the `loaded` prop is set to true.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-startup--start-up)
+
+Hide codeRefresh
+
+<IressLoading
+  messageList\={{
+    '0': <IressText color\="colour.neutral.70"\>Switching applications...</IressText\>,
+    '4500': <IressText color\="colour.neutral.70"\>This is taking longer than expected...</IressText\>
+  }}
+  pattern\="start-up"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Message to display when the loading time is longer than expected.
+
+ReactNode
+
+
+
+ | 
+
+<IressText />
+
+
+
+ | Set object |
+| estimatedFinishTime | 
+
+Estimated time in milliseconds for the loading to finish.
+
+number
+
+
+
+ | 
+
+3000
+
+ | Set number |
+| loaded | 
+
+If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| messageList | 
+
+A message list to display while loading. The key is the time when you want the message to change to this message. If using a message list, the `children` will not be displayed.
+
+Record<number, ReactNode>
+
+ | \- | 
+
+RAW
+
+messageList :
+
+{
+
+*   0 :
+    
+    {...} 6 keys
+    
+*   4500 :
+    
+    {...} 6 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| pattern | 
+
+Use `pattern="start-up"` for the following use cases:
+
+*   Loading an application for the first time
+*   Switching from a different application to a new application
+*   Switching from a client's website to an Iress application
+*   Switching themes
+
+literal
+
+
+
+ | \- | 
+
+"start-up"
+
+ |
+| progress | 
+
+If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+
+IressProgressProps\['value'\]
+
+ | \- | Set object |
+| renderProgress | 
+
+This is a render prop that allows you to override the default progress rendering. This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+
+( props: Pick< IressProgressProps<number | undefined>, 'min' | 'max' | 'sectionTitle' | 'value' >, ) => ReactNode
+
+ | (props) => <IressProgress {...props} /> | \- |
+| screenReaderText | 
+
+Only screen readers will see this message, it is changed to the `children` message after the delay.
+
+ReactNode
+
+
+
+ | 
+
+'Loading...'
+
+ | Set object |
+| startFrom | 
+
+Set the start from timer, useful when stringing multiple loading patterns across different pages (eg. logging via a third-party authentication provider)
+
+number
+
+
+
+ | \- | Set number |
+| timeout | 
+
+Set the timeouts for showing the progress bar and message.
+
+{ /\*\* \* The time in milliseconds before this component begins to fade out (if \`loaded\` is set to \`true\`). \* @default 200 \*/ loaded?: number; /\*\* \* The time in milliseconds before the message message is displayed. \* @default 2500 \*/ message?: number; /\*\* \* The time in milliseconds before the progress bar is displayed. \* @default 500 \*/ progress?: number; }
+
+ | \- | Set object |
+
+### `validate`
+
+The `validate` loading pattern is used to indicate that a server-side validation is in progress. It is typically used when the user is submitting a form or performing an action that requires validation and the user is not expected to leave the page.
+
+#### Behavior
+
+1.  When `loading` is false, the button will be displayed immediately (customised using the `renderButton` prop, or the `children` prop if you do not mind passing in the `loading` prop twice).
+2.  When `loading` is true, the button will be disabled and a spinner will be displayed.
+3.  When `loading` is true after 2.5 seconds (configured using `timeout`), the message will be displayed. This message can be customised using the `message` prop. Its placement can be adjusted using the `position` prop.
+
+#### Message position
+
+Forms come in all shapes and sizes, and the `IressLoading` component is designed to be flexible enough to work with any form. The `position` prop allows you to adjust the placement of the loading message. The available options are:
+
+*   `top`: The message will be displayed above the button. It is absolute positioned to the top of the button, and will not disrupt the layout of the form.
+*   `bottom` (default): The message will be displayed below the button. It is absolute positioned to the bottom of the button, and will not disrupt the layout of the form.
+*   `right`: The message will be displayed on the right of the button. It is inline, and will push any content to the right of the button down.
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-loading-patterns-validate--validate)
+
+Submit
+
+This is taking longer than expected...
+
+Cancel
+
+Hide codeRefresh
+
+<IressInline gap\="sm"\>
+  <IressLoading
+    loading
+    pattern\="validate"
+  />
+  <IressButton mode\="tertiary"\>
+    Cancel  </IressButton\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| loading | 
+When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+
+IressButtonProps\['loading'\]
+
+ | 
+
+false
+
+ | 
+
+true
+
+ |
+| message | 
+
+Set the message to be displayed when the button is in the loading state.
+
+ReactNode
+
+
+
+ | 
+
+'This is taking longer than expected...'
+
+ | Set object |
+| pattern | 
+
+Use `pattern="validate"` for the following use cases:
+
+*   Submitting a form
+*   Saving a record
+
+literal
+
+
+
+ | 
+
+'validate'
+
+ | 
+
+"validate"
+
+ |
+| position | 
+
+This sets where the loading message will be displayed.
+
+*   `bottom` - The loading message will be displayed below the button. It will be absolute positioned.
+*   `top` - The loading message will be displayed above the button. It will be absolute positioned.
+*   `right` - The loading message will be displayed to the right of the button. It will be inline positioned.
+
+union
+
+
+
+ | 
+
+'bottom'
+
+ | 
+
+bottomtopright
+
+ |
+| renderButton | 
+
+This is a render prop that allows you to override the default button rendering. This is useful if you want to use a different button component or if you want to add additional props to the button.
+
+(props: Pick<IressButtonProps, 'loading'>) => ReactNode
+
+ | (props: Pick<IressButtonProps, 'className' | 'loading'>) => ( <IressButton {...props} type="submit"> Submit </IressButton> ) | \- |
+| timeout | 
+
+The time in milliseconds before the loading message is displayed.
+
+number
+
+
+
+ | 
+
+2500
+
+ | Set number |
+
+Suspense
+--------
+
+Since React 18, React has introduced a new way to handle loading states using `Suspense`, allowing you to lazy load components in an efficient manner.
+
+The `IressLoadingSuspense` component is a wrapper around the `IressLoading` component that uses `Suspense` to handle loading states. It is used in the same way as the `IressLoading` component, however you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook. The `IressLoadingSuspense` component will automatically handle the loading state for you.
+
+The wizard example can be translated to use `IressLoadingSuspense` as follows (it includes the slow and fast examples).
+
+**Differences in behaviour**
+
+*   The `IressLoadingSuspense` component will automatically handle the loading state for you, so you do not need to pass the `loaded` prop or use the `IressLoading.shouldRender` hook.
+*   Nested suspense components will be handled by the highest `IressLoadingSuspense` component. This means that if you have multiple nested `IressLoadingSuspense` components, only the top most one will display a loading state. You can see this in the example when you click the Next button, you no longer see the component loading pattern due to it being nested under the page loading pattern.
+
+[](./iframe.html?id=patterns-loading-suspense--suspense)
+
+Hide codeRefresh
+
+interface PageProps {
+  setPage: (page: number) \=> void;
+}
+interface ChartProps {
+  money: number | null;
+}
+const API \= {
+  getHomePage: async () \=> {
+    await new Promise((resolve) \=> {
+      setTimeout(resolve, 3000);
+    });
+    return 1;
+  },
+  getRetirementIncomeProjection: async () \=> {
+    await new Promise((resolve) \=> {
+      setTimeout(resolve, 2000);
+    });
+    return true;
+  },
+  getChart: async () \=> {
+    await new Promise((resolve) \=> {
+      const chartImage \= new Image();
+      chartImage.src \= retirementGraph;
+      setTimeout(resolve, 1000);
+    });
+    return true;
+  },
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+const Chart \= () \=> {
+  const initialChart \= IressLoadingSuspense.use(API.getChart);
+  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
+  const \[money, setMoney\] \= useState<number | null\>(null);
+  const \[updating, setUpdating\] \= useState(false);
+  const deferredMoney \= useDeferredValue(money);
+  const chart \= updatedChart ?? initialChart;
+  useEffect(() \=> {
+    if (deferredMoney \=== null) {
+      return;
+    }
+    const update \= async () \=> {
+      setUpdating(() \=> true);
+      const newChart \= await API.chartUpdate();
+      setUpdatedChart(newChart);
+      setUpdating(() \=> false);
+    };
+    void update();
+  }, \[deferredMoney\]);
+  return (
+    <IressLoadingSuspense pattern\="component" update\={updating}\>
+      {chart && <Graph />}
+      <IressPanel\>
+        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
+        >          <IressStack gap\="md"\>
+            <h3\>Update projection</h3\>
+            <IressFormField
+              name\="money"
+              label\="My money"
+              render\={(controlledProps) \=> (
+                <IressInputCurrency {...controlledProps} />
+              )}
+            />
+            <IressButton type\="submit"\>Update projection</IressButton\>
+          </IressStack\>
+        </IressForm\>
+      </IressPanel\>
+    </IressLoadingSuspense\>
+  );
+};
+const StartPage \= ({ setPage }: PageProps) \=> (
+  <IressText\>
+    <h2\>Maximise your retirement</h2\>
+    <p\>
+      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
+    <hr />
+    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
+  </IressText\>
+);
+const RetirementIncomeProjectionPage \= () \=> {
+  const promise \= API.getRetirementIncomeProjection;
+  IressLoadingSuspense.use(promise);
+  IressLoadingSuspense.uncache(promise);
+  return (
+    <IressText\>
+      <h2\>Retirement Income Projection</h2\>
+      <p\>
+        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
+      <Chart />
+    </IressText\>
+  );
+};
+const HomePage \= () \=> {
+  const promise \= API.getHomePage;
+  const startPage \= IressLoadingSuspense.use(promise);
+  IressLoadingSuspense.uncache(promise);
+  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
+  const page \= movedPage ?? startPage;
+  return (
+    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
+      {page \=== 1 && (
+        <IressLoadingSuspense pattern\="page" template\="form"\>
+          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
+        </IressLoadingSuspense\>
+      )}
+      {page \=== 2 && (
+        <IressLoadingSuspense pattern\="page" template\="form"\>
+          <RetirementIncomeProjectionPage />
+        </IressLoadingSuspense\>
+      )}
+    </IressContainer\>
+  );
+};
+export const LoadingSuspenseWizard \= () \=> (
+  <IressLoadingSuspense pattern\="start-up"\>
+    <HomePage />
+  </IressLoadingSuspense\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The content that will be rendered inside the Suspense boundary. Typically includes lazy-loaded components and components that use the `use` or `IressLoadingSuspense.use` hook.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Duration (in milliseconds) to delay unmounting the fallback to allow the fade-out animation to complete. By default it uses the default delay of the pattern.
+
+number
+
+
+
+ | \- | \- |
+| onLoaded | 
+
+By default it uses the default delay of the pattern.
+
+() => void
+
+ | \- | \- |
+| startFrom | 
+
+Duration (in milliseconds) before showing the loading pattern. Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+
+number
+
+
+
+ | \- | \- |
+
+[](./iframe.html?id=patterns-loading-suspense--fast-suspense)
+
+Hide codeRefresh
+
+interface PageProps {
+  setPage: (page: number) \=> void;
+}
+interface ChartProps {
+  money: number | null;
+}
+const API \= {
+  getHomePage: async () \=> {
+    await new Promise((resolve) \=> {
+      setTimeout(resolve, 300);
+    });
+    return 1;
+  },
+  getRetirementIncomeProjection: async () \=> {
+    await new Promise((resolve) \=> {
+      setTimeout(resolve, 200);
+    });
+    return true;
+  },
+  getChart: async () \=> {
+    await new Promise((resolve) \=> {
+      const chartImage \= new Image();
+      chartImage.onload \= resolve;
+      chartImage.src \= retirementGraph;
+    });
+    return true;
+  },
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      setTimeout(() \=> {
+        resolve(true);
+      }, 200);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+const Chart \= () \=> {
+  const initialChart \= IressLoadingSuspense.use(API.getChart);
+  const \[updatedChart, setUpdatedChart\] \= useState<boolean | undefined\>();
+  const \[money, setMoney\] \= useState<number | null\>(null);
+  const \[updating, setUpdating\] \= useState(false);
+  const deferredMoney \= useDeferredValue(money);
+  const chart \= updatedChart ?? initialChart;
+  useEffect(() \=> {
+    if (deferredMoney \=== null) {
+      return;
+    }
+    const update \= async () \=> {
+      setUpdating(() \=> true);
+      const newChart \= await API.chartUpdate();
+      setUpdatedChart(newChart);
+      setUpdating(() \=> false);
+    };
+    void update();
+  }, \[deferredMoney\]);
+  return (
+    <IressLoadingSuspense pattern\="component" update\={updating}\>
+      {chart && <Graph />}
+      <IressPanel\>
+        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
+        >          <IressStack gap\="md"\>
+            <h3\>Update projection</h3\>
+            <IressFormField
+              name\="money"
+              label\="My money"
+              render\={(controlledProps) \=> (
+                <IressInputCurrency {...controlledProps} />
+              )}
+            />
+            <IressButton type\="submit"\>Update projection</IressButton\>
+          </IressStack\>
+        </IressForm\>
+      </IressPanel\>
+    </IressLoadingSuspense\>
+  );
+};
+const StartPage \= ({ setPage }: PageProps) \=> (
+  <IressText\>
+    <h2\>Maximise your retirement</h2\>
+    <p\>
+      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
+    <hr />
+    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
+  </IressText\>
+);
+const RetirementIncomeProjectionPage \= () \=> {
+  IressLoadingSuspense.use(API.getRetirementIncomeProjection);
+  return (
+    <IressText\>
+      <h2\>Retirement Income Projection</h2\>
+      <p\>
+        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
+      <Chart />
+    </IressText\>
+  );
+};
+const HomePage \= () \=> {
+  const startPage \= IressLoadingSuspense.use(API.getHomePage);
+  const \[movedPage, setMovedPage\] \= useState<number | undefined\>();
+  const page \= movedPage ?? startPage;
+  return (
+    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
+      {page \=== 1 && (
+        <IressLoadingSuspense pattern\="page" template\="form"\>
+          {page \=== 1 && <StartPage setPage\={setMovedPage} />}
+        </IressLoadingSuspense\>
+      )}
+      {page \=== 2 && (
+        <IressLoadingSuspense pattern\="page" template\="form"\>
+          <RetirementIncomeProjectionPage />
+        </IressLoadingSuspense\>
+      )}
+    </IressContainer\>
+  );
+};
+export const LoadingSuspenseWizardFast \= () \=> (
+  <IressLoadingSuspense pattern\="start-up"\>
+    <HomePage />
+  </IressLoadingSuspense\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The content that will be rendered inside the Suspense boundary. Typically includes lazy-loaded components and components that use the `use` or `IressLoadingSuspense.use` hook.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Duration (in milliseconds) to delay unmounting the fallback to allow the fade-out animation to complete. By default it uses the default delay of the pattern.
+
+number
+
+
+
+ | \- | \- |
+| onLoaded | 
+
+By default it uses the default delay of the pattern.
+
+() => void
+
+ | \- | \- |
+| startFrom | 
+
+Duration (in milliseconds) before showing the loading pattern. Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+
+number
+
+
+
+ | \- | \- |
+
+Hooks
+-----
+
+### `IressLoading.shouldRender`
+
+The `IressLoading.shouldRender` hook is used to determine whether the loading pattern should be displayed or not. It is used to control the visibility of the loading pattern based on the `loaded` prop.
+
+Its main function is to delay the un-mounting of the loading pattern when the `loaded` prop is set to true to allow for a fade out animation.
+
+const \[loaded, setLoaded\] \= useState(false);
+const renderLoading \= IressLoading.shouldRender(loaded);
+// Use renderLoading instead of !loaded for the smooth transition.
+if (renderLoading) return <IressLoading pattern\="page" loaded\={loaded} />;
+else return <IressText\>Content is loaded</IressText\>;
+
+```
+
+### `IressLoadingSuspense.use`
+
+The `IressLoadingSuspense.use` hook is a polyfill for the React 19 `use` hook, allowing you to have similar functionality in React 18. It is used to handle loading states when using `IressLoadingSuspense`.
+
+It is not as smart as the `use` hook in React 19, it will cache the result of the promise and will not re-fetch the data if the component is re-mounted. You can clear a function's results in the cache by using the `IressLoadingSuspense.uncache` function.
+
+Avoid in React 19
+-----------------
+
+If you are using React 19, it is recommended to use the built-in `use` hook instead of this one. In future releases, this hook will be deprecated and removed from the library.
+
+const HomePage \= () \=> {
+  const pageData \= IressLoadingSuspense.use(API.fetchPage('home'));
+  return (
+    <IressText\>
+      <h2\>{pageData.title}</h2\>
+      <p\>{pageData.description}</p\>
+    </IressText\>
+  );
+};
+export const App \= () \=> (
+  <IressLoadingSuspense pattern\="start-up"\>
+    <HomePage />
+  </IressLoadingSuspense\>
+);
+
+```
+
+Examples
+--------
+
+Below are some examples of how to use the `IressLoading` component in different scenarios.
+
+### Wizard
+
+Here you can see how a wizard can use the `IressLoading` component at different stages of the application. The first example shows a `slow` wizard, and the second example shows how the same code looks when the requests are fast. The main difference is you see minimal loading inidicators in the second example, improving the perception that the system is fast.
+
+[](./iframe.html?id=patterns-loading--wizard)
+
+Hide codeRefresh
+
+interface PageProps {
+  setPage: (page: number) \=> void;
+}
+interface ChartProps {
+  money: number | null;
+}
+const API \= {
+  initialise: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 3000);
+    }),
+  data: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+  chart: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a slow network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 2000);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+const Chart \= () \=> {
+  const \[chart, setChart\] \= useState(false);
+  const \[money, setMoney\] \= useState<number | null\>(null);
+  const \[loaded, setLoaded\] \= useState(false);
+  const \[updating, setUpdating\] \= useState(false);
+  const safeLoaded \= IressLoading.shouldRender(loaded);
+  const deferredMoney \= useDeferredValue(money);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newChart \= await API.chart();
+      setChart(newChart);
+      setLoaded(() \=> true);
+    };
+    void initialise();
+  }, \[\]);
+  useEffect(() \=> {
+    if (deferredMoney \=== null) {
+      return;
+    }
+    const update \= async () \=> {
+      setUpdating(() \=> true);
+      const newChart \= await API.chartUpdate();
+      setChart(newChart);
+      setUpdating(() \=> false);
+    };
+    void update();
+  }, \[deferredMoney\]);
+  return (
+    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
+      {chart && <Graph />}
+      <IressPanel\>
+        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
+        >          <IressStack gap\="md"\>
+            <h3\>Update projection</h3\>
+            <IressFormField
+              name\="money"
+              label\="My money"
+              render\={(controlledProps) \=> (
+                <IressInputCurrency {...controlledProps} />
+              )}
+            />
+            <IressButton type\="submit"\>Update projection</IressButton\>
+          </IressStack\>
+        </IressForm\>
+      </IressPanel\>
+    </IressLoading\>
+  );
+};
+const StartPage \= ({ setPage }: PageProps) \=> (
+  <IressText\>
+    <h2\>Maximise your retirement</h2\>
+    <p\>
+      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
+    <hr />
+    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
+  </IressText\>
+);
+const RetirementIncomeProjectionPage \= () \=> {
+  const \[data, setData\] \= useState(false);
+  const loaded \= data !== false;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newData \= await API.data();
+      setData(newData);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
+  }
+  return (
+    <IressText\>
+      <h2\>Retirement Income Projection</h2\>
+      <p\>
+        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
+      <Chart />
+    </IressText\>
+  );
+};
+export const LoadingWizard \= () \=> {
+  const \[page, setPage\] \= useState(0);
+  const loaded \= page \> 0;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      await API.initialise();
+      setPage(1);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="start-up" loaded\={loaded} />;
+  }
+  return (
+    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
+      {page \=== 1 && <StartPage setPage\={setPage} />}
+      {page \=== 2 && <RetirementIncomeProjectionPage />}
+    </IressContainer\>
+  );
+};
+
+```
+
+#### Props
+
+[](./iframe.html?id=patterns-loading--fast-wizard)
+
+Hide codeRefresh
+
+interface PageProps {
+  setPage: (page: number) \=> void;
+}
+interface ChartProps {
+  money: number | null;
+}
+const API \= {
+  initialise: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a fast network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 300);
+    }),
+  data: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a fast network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 300);
+    }),
+  chart: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a fast network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 300);
+    }),
+  chartUpdate: async () \=>
+    new Promise<boolean\>((resolve) \=> {
+      // Simulate a fast network request.
+      setTimeout(() \=> {
+        resolve(true);
+      }, 300);
+    }),
+};
+const Graph \= () \=> (
+  <img
+    src\={retirementGraph}
+    alt\=""
+    style\={{ maxWidth: '100%', height: 'auto' }}
+  />
+);
+const Chart \= () \=> {
+  const \[chart, setChart\] \= useState(false);
+  const \[money, setMoney\] \= useState<number | null\>(null);
+  const \[loaded, setLoaded\] \= useState(false);
+  const \[updating, setUpdating\] \= useState(false);
+  const safeLoaded \= IressLoading.shouldRender(loaded);
+  const deferredMoney \= useDeferredValue(money);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newChart \= await API.chart();
+      setChart(newChart);
+      const testImg \= new Image();
+      testImg.onload \= () \=> setLoaded(true);
+      testImg.src \= retirementGraph;
+    };
+    void initialise();
+  }, \[\]);
+  useEffect(() \=> {
+    if (deferredMoney \=== null) {
+      return;
+    }
+    const update \= async () \=> {
+      setUpdating(() \=> true);
+      const newChart \= await API.chartUpdate();
+      setChart(newChart);
+      setUpdating(() \=> false);
+    };
+    void update();
+  }, \[deferredMoney\]);
+  return (
+    <IressLoading pattern\="component" loaded\={!safeLoaded} update\={updating}\>
+      {chart && <Graph />}
+      <IressPanel\>
+        <IressForm<ChartProps>          onSubmit={(projectionData) \=> setMoney(projectionData.money)}
+        >          <IressStack gap\="md"\>
+            <h3\>Update projection</h3\>
+            <IressFormField
+              name\="money"
+              label\="My money"
+              render\={(controlledProps) \=> (
+                <IressInputCurrency {...controlledProps} />
+              )}
+            />
+            <IressButton type\="submit"\>Update projection</IressButton\>
+          </IressStack\>
+        </IressForm\>
+      </IressPanel\>
+    </IressLoading\>
+  );
+};
+const StartPage \= ({ setPage }: PageProps) \=> (
+  <IressText\>
+    <h2\>Maximise your retirement</h2\>
+    <p\>
+      Maximize your retirement in Australia by contributing to your super early      and making voluntary top-ups to benefit from compounding. Take advantage      of employer contributions, government co-contributions, and tax benefits.      Diversify your investments and review your strategy regularly to stay on      track. Consider additional income streams and seek professional advice for      a secure future.    </p\>
+    <hr />
+    <IressButton onClick\={() \=> setPage(2)}\>Next</IressButton\>
+  </IressText\>
+);
+const RetirementIncomeProjectionPage \= () \=> {
+  const \[data, setData\] \= useState(false);
+  const loaded \= data !== false;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      const newData \= await API.data();
+      setData(newData);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="page" template\="form" loaded\={loaded} />;
+  }
+  return (
+    <IressText\>
+      <h2\>Retirement Income Projection</h2\>
+      <p\>
+        We've got enough information to provide you with a retirement income        projection. This will help you understand how much you can expect to        receive in retirement based on your current super balance, your        contributions, and your investment strategy.      </p\>
+      <Chart />
+    </IressText\>
+  );
+};
+export const LoadingWizardFast \= () \=> {
+  const \[page, setPage\] \= useState(0);
+  const loaded \= page \> 0;
+  const renderLoading \= IressLoading.shouldRender(loaded);
+  useEffect(() \=> {
+    const initialise \= async () \=> {
+      await API.initialise();
+      setPage(1);
+    };
+    void initialise();
+  }, \[\]);
+  if (renderLoading) {
+    return <IressLoading pattern\="start-up" loaded\={loaded} />;
+  }
+  return (
+    <IressContainer style\={{ maxWidth: '600px', paddingBlock: '3rem' }}\>
+      {page \=== 1 && <StartPage setPage\={setPage} />}
+      {page \=== 2 && <RetirementIncomeProjectionPage />}
+    </IressContainer\>
+  );
+};
+
+```
+
+#### Props