CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS

In Stack, we’ve enhanced the loading experience with a new, visually appealing spinner. This spinner provides clear visual cues during various operations such as app initialization, data fetching, and account detail retrieval.

What to Expect When the CRM is Loading

Initializing the App

When you launch the app or load a new page, the spinner indicates the start of the loading process. It remains active until all necessary data for the app or page is fully loaded.

Loading Fresh Data

After the app has initialized, you might see the spinner again when new data is being fetched. This can occur due to user actions, real-time updates, or scheduled refreshes, signaling that fresh data is being retrieved from the server.

Retrieving Account Details

If you’re using multiple user accounts or accounts, the spinner may activate when switching accounts or accessing specific account information.

Infinite Loading State

Occasionally, a page might not load within the expected timeframe, resulting in an infinite loading state. If this happens, you’ll see a prompt to “Click Here to refresh.” Clicking this will refresh the page and automatically clear the browser cache, simplifying the troubleshooting process.

Note: Using the refresh action during an infinite loading state will automatically send error reports to our servers for analysis, helping us improve the platform.

Impact of Custom CSS or Custom JS

Custom CSS and JavaScript (JS) can affect the loader’s performance and appearance. Here’s how:

Custom CSS Interference

Custom CSS changes the styling of a webpage. If it conflicts with the loader’s styles, it might disrupt its visual representation or animations. Ensure your custom CSS aligns with the loader’s design to maintain a seamless user experience.

Custom JS Interference

Custom JavaScript can alter the loader’s functionality by changing its logic or event responses. It’s important to review and adjust your custom JS to ensure it works smoothly with the loader’s features.

Recommendation: Test and debug any custom CSS or JS to identify conflicts with the loader. Adjustments should align with the loader’s design for a consistent experience.

Additional Troubleshooting

Troubleshooting Custom CSS/JS Interference

If the loader’s refresh button isn’t working or your custom CSS/JS is causing issues, you may need to clear site data and cookies manually. Here’s how:

1. Open your browser’s inspection pane by right-clicking on the screen and selecting “Inspect.”
2. In the inspection pane, go to the “Application” tab.
3. Under “Storage,” click “Clear Site Data.”
4. Click on the lock icon next to the URL, select “Cookies,” and then “Remove” to clear cookies.
5. Perform a hard refresh:
   • On Mac: Hold Command and press R.
   • On PC: Hold Control and press F5.

For detailed instructions, refer to guides for Chrome, Firefox, Safari, and Edge.

What if the Page Doesn’t Redirect?

If the page remains stuck, ensure all steps above have been followed. If issues persist, additional support may be required.