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

Significant enhancements have been implemented in the loading functionality on our platform. We have transitioned from the traditional 9-dot loader to a modern, visually compelling spinner. The new design showcases diverse visual states, effectively indicating operations like app initialization, data fetching, and sub-account detail retrieval.

Covered in this Article:

What Statuses to expect when the CRM is loading?

Initializing the App:

Loading Fresh Data: 

Retrieving Sub-account Details: 

Infinite Loading State: 

Impact of Custom CSS or Custom JS:

Custom CSS Interference:

Custom JS Interference:

Additional Troubleshooting:

Is the User who is facing the problem added to the sub-account?

What should I do if the new loader's refresh button doesn't work or my custom CSS/JS interferes with the loader's operations?

What Statuses to expect when the CRM is loading?

Initializing the App:

This is the first state where the loader begins to spin when the app is launched or a new page is loaded. It represents the start of the loading process and stays active until the necessary data for the app or page is fully fetched.

Loading Fresh Data: 

After the initial app loading, there could be a need to fetch new data based on user actions, real-time updates, or scheduled refreshes. During this state, the loader spins, indicating that fresh data is being retrieved from the server.

Retrieving Sub-account Details: 

If your application supports multiple user accounts or sub-accounts, this state might be activated when switching between accounts or loading specific information related to a particular sub-account.

Infinite Loading State: 

This less desirable state occurs when the app or a specific page doesn't load within a predefined time (like 30 seconds). The loader might keep spinning without progress, indicating an issue preventing the page from loading correctly. An action prompt saying "Click Here to refresh" will appear in such instances. Activating this button will refresh the page and automatically clear the browser cache, eliminating the need to manually clear site data and cookies and simplifying the troubleshooting process.

Please Note:

When the refresh action is used during an infinite loading state, any errors on your end will be automatically captured and forwarded to our servers for in-depth analysis. This helps us to refine the debugging process and to continuously improve the platform experience.

Impact of Custom CSS or Custom JS:

Custom CSS and JS can impact the loader's behavior and overall functionality. Here's an explanation of their potential implications:

Custom CSS Interference:

Custom CSS refers to modifications made to the styling and appearance of a webpage. If the custom CSS overrides or conflicts with the loader's styles or classes, it can disrupt the intended visual representation of the loader or cause inconsistencies.

The loader may not display the expected visual states or animations in such cases, leading to confusion or a less-than-optimal user experience.

It's important to review and adjust the custom CSS to ensure it aligns with any changes introduced in the loader, allowing for seamless integration of custom styling without interfering with the loader's intended behavior.

Custom JS Interference:

Custom JS (JavaScript) code can impact the loader's functionality by altering its underlying logic or the events it listens to.

If the custom JS modifies or overrides the loader's event handlers, it can disrupt its intended actions or prevent it from responding correctly to user interactions.

Reviewing and adapting any custom JS code to work harmoniously with the loader's updated features and event system is crucial. This ensures the loader functions as intended and maintains its proper behavior during various loading states.

It's recommended to thoroughly test and debug any custom CSS or JS modifications to identify potential conflicts or inconsistencies with the loader. Adjustments should be made to align the custom code with the updated loader design and functionality, ensuring a seamless and consistent user experience throughout the loading process.

Additional Troubleshooting:

Is the User who is facing the problem added to the sub-account?

If you are an agency admin, make sure the user is added to at least one sub-account:

1. Go to the agency team management page in the agency view

2. Search by name, email, or phone on the top right for the user

3. Click on Edit

4. Click on  User Roles

5. Ensure the user is added to at least one sub-account from the dropdown.

Please Note:

If you are not the agency owner, please get in touch with the agency admin so they can add you back to the sub-account you should have access to.

What should I do if the new loader's refresh button doesn't work or my custom CSS/JS interferes with the loader's operations?

A: In such situations, manual troubleshooting could be required. The process involves clearing site data, removing cookies, and hard refreshing the page. Here's how to do it:

1. Start by opening the inspection pane in your browser. This is done by right-clicking on the screen and selecting "Inspect." If the pane opens on the left side, you might need to click the "more" icon (represented by two arrows) to find the "Application" tab. 
   
   

2. Inside the "Application" tab, choose "Storage," then scroll down to locate the "Clear Site Data" button and click it. Here are guides for specific browsers: Chrome, Firefox, Safari, and Edge.
   
   

3. Afterward, navigate to the lock icon next to the URL at the top of the page, click on it, and select "Cookies." There you'll see an option to remove the site's cookies. Click "Remove."
   
   

4. Once you've cleared site data and removed the cookies, click "Done."
   
   

5. Finally, you'll need to refresh your browser page. For a hard refresh on a Mac, hold the command key and hit R. For a PC, hold the control key and press F5. Here's how to refresh hard on Chrome, Firefox, Safari, and Edge.

What if the page doesn't redirect and gets stuck?