--- title: "The Product Loading Screen" canonical: https://customerscanvas.com/docs/cc4/product-loading-screen.htm archived: true applies_to: - product: "Customer's Canvas On-Premises" - product: "Design Editor" versions: ["4.4.25", "4.x (may differ)"] --- **You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/). # The Product Loading Screen **Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation** This topic dwells on how to customize the product loading screen in Customer's Canvas. While a product is loading, there are three moments that may confuse a user: - The first launch of a product is usually time-consuming, and if users are not warned about this, they may be confused. So, it is a good idea to ask users to wait and tell them that the product will load faster on the second and following launches. - The second and following product loads are also not instantaneous and displaying a message explaining that the system is working and a product is loading can help to avoid unwanted actions like page refreshing. - Sometimes errors happen, and if this is the case, the related message has to be displayed in order to inform a user about the error. These cases can be handled using the [loadEditor](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.loadeditor.htm.md) method that accepts the [preloader](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) object as an optional configuration parameter. Using this parameter, you can display custom messages when a product is loading. The following example shows how this works. ```html ``` Here, we configure the **preloader** object. The **firstTimeMessage** property specifies what message is shown for the first launch of a product. If it is not set, then `"The product is being configured for the first time. It may take a while."` message is shown by default. The **errorMessage** property specifies what message is shown if an exception is thrown while loading the product. Also, **preloader** has the **enabled** property that shows or hides this preloader. It is `true` by default. To change the default icon of the preloader, you need to customize styles: - In the on-premises version, open the `\Resources\Libs\loadmask\LoadMask.less` file and change the **@preloaderColor** variable to specify a color. To set a new image, define the **.icon-cc-logo:before** style as follows: ``` .icon-cc-logo:before { background-image: url('img/logo.png'); background-position: 0 0; display: block; height: 105px; width: 100px; content: "" !important; } ``` - In the hosted version, place the `loader.css` file from the downloads to the `\Configuration\customCss\` subfolder and include a link to this file in your file from where you load the editor: ``` ``` ## See Also ### Manual - [Introduction to IFrame API](https://customerscanvas.com/docs/cc4/IframeApi-introduction.htm.md) ### IFrame API Reference - [loadEditor](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.loadeditor.htm.md) ### Downloads - [Code sample](https://customerscanvas.com/docs/cc4/samples/ProductLoadingScreen.zip)