# 6a. Preloading Platform Web-Component in SPA

To ensure fast performance and a seamless user experience, it's important to preload the Platform Web-Components as early as possible in your Single Page Application (SPA). This allows Platform to initialize the required scripts before the user interacts with any UI that depends on them.

### How to Preload

Use the loadPlatform method during the early lifecycle of your app (e.g., in your root component or app bootstrap logic):

```javascript
loadPlatform({
    publicKey: config.PAYENGINE_PUBLIC_KEY,
    //lightweight: true // Optional
}).then((pe) => {
    console.log('Platform initialized', pe);
});
```

### Understanding the lightweight Option

The lightweight option controls how much of the Platform Web-Components library is loaded:

* ***lightweight:true*** - Only loads the core components required for **accepting payments,** including Secure Fields and other essential scripts. This mode is optimized for speed and ideal if you only need basic payment functionality.
* ***Full mode (default)*** - If you do **not** specify lightweight, the full set of Platform Web-Components will be loaded. This includes **everything needed for payments** plus additional embedded web components like transaction history. 

### When to Use Each Mode

<table><thead><tr><th width="188.013671875">Mode</th><th>Use When...</th></tr></thead><tbody><tr><td>lightweight:true</td><td>You only need payment functionality (e.g., card entry, submit payment).</td></tr><tr><td>Full mode (default)</td><td>You also need access to embedded web components like transaction history etc.</td></tr></tbody></table>

### Best Practices

* **Always preload** the Platform Web-Components at the earliest possible point in your app lifecycle to reduce load time during user interaction.
* Make sure to **await the Promise** returned by loadPlatform( ) if other parts of your app rely on the components being fully initialized.
* For performance-sensitive flows, consider starting with lightweight: true and loading additional components dynamically only if/when needed.