Skip to content
Miscellaneous

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.

4 min read970 words9 explained imagesUpdated Tue, 20 Jun, 2023 at 4:01 PM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. What Statuses to expect when the CRM is loading?
  2. Initializing the App:
  3. Loading Fresh Data:
  4. Retrieving Sub-account Details:
  5. Infinite Loading State:
  6. Impact of Custom CSS or Custom JS:
  7. Custom CSS Interference:
  8. Custom JS Interference:
  9. Additional Troubleshooting:
  10. Is the User who is facing the problem added to the sub-account?
  11. 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?

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.

Initializing the App: (image 1 of 9) What this shows This is the first state where the loader begins to spin when the app is launched or a new page is loaded. What this shows Illustrates the "Initializing the App:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Initializing the App:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 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. Immediately after, the guide continues: 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. Image 1 of 9 What this coversThis 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. Next stepAfter 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.

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.

Loading Fresh Data: (image 2 of 9) What this shows After the initial app loading, there could be a need to fetch new data based on user actions, real-time updates, or scheduled refreshes. What this shows Illustrates the "Loading Fresh Data:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Loading Fresh Data:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 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. Immediately after, the guide continues: 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. Image 2 of 9 What this coversAfter 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. Next stepIf 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.

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.

Retrieving Sub-account Details: (image 3 of 9) What this shows If your application supports multiple user accounts or sub-accounts, this state might be activated when switching between accounts or… What this shows Illustrates the "Retrieving Sub-account Details:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Retrieving Sub-account Details:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 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. Immediately after, the guide continues: 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…. Image 3 of 9 What this coversIf 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. Next stepThis 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.

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.

Infinite Loading State: (image 4 of 9) What this shows This less desirable state occurs when the app or a specific page doesn't load within a predefined time (like 30 seconds). What this shows Illustrates the "Infinite Loading State:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Infinite Loading State:" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 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…. Immediately after, the guide continues: 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…. Image 4 of 9 What to clickThis 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.
Buttons and menus referenced "Click Here to refresh"
Next stepWhen 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.

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

Is the User who is facing the problem added to the sub-account? (image 5 of 9) What this shows 2. What this shows Illustrates the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 2. Search by name, email, or phone on the top right for the user. Immediately after, the guide continues: 5. Ensure the user is added to at least one sub-account from the dropdown. Image 5 of 9 What this covers2. Search by name, email, or phone on the top right for the user Next step5. Ensure the user is added to at least one sub-account from the dropdown.

4. Click on  User Roles

Is the User who is facing the problem added to the sub-account? (image 6 of 9) What this shows 2. What this shows Illustrates the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 2. Search by name, email, or phone on the top right for the user. Immediately after, the guide continues: 5. Ensure the user is added to at least one sub-account from the dropdown. Image 6 of 9 What this covers2. Search by name, email, or phone on the top right for the user Next step5. Ensure the user is added to at least one sub-account from the dropdown.

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

Is the User who is facing the problem added to the sub-account? (image 7 of 9) What this shows 5. What this shows Illustrates the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot appears in the "Is the User who is facing the problem added to the sub-account?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". The text alongside this image reads: 5. Ensure the user is added to at least one sub-account from the dropdown. Immediately after, the guide continues: 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. Image 7 of 9 What to choose5. Ensure the user is added to at least one sub-account from the dropdown. Next stepIf 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.

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. 

    Step 1 of 5: Start by opening the inspection pane in your browser. This is done by… What this shows Step 1 of 5: Start by opening the inspection pane in your browser. What this shows Shows what to click for step 1 of 5 in the "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?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot accompanies step 1 of 5 in the "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?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". At this point in the walkthrough you 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. The next step is to 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. Step 1 of 5Image 8 of 9 What to clickStart 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. Next stepInside 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.
    All 5 steps in this procedure
    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. this image
    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.

  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."

    Step 3 of 5: Afterward, navigate to the lock icon next to the URL at the top of the… What this shows Step 3 of 5: 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… What this shows Shows what to choose for step 3 of 5 in the "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?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". This screenshot accompanies step 3 of 5 in the "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?" section of "CRM Loading States: Troubleshooting lags and Impact of Custom CSS and JS". At this point in the walkthrough you 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.". The next step is to once you've cleared site data and removed the cookies, click "Done.". Step 3 of 5Image 9 of 9 What to chooseAfterward, 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." Next stepOnce you've cleared site data and removed the cookies, click "Done."
    All 5 steps in this procedure
    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." this image
    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.

  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?

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? (video 1) Open in a new tab

Frequently asked questions

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
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: 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. 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. 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." Once you've cleared site data and removed the cookies, click "Done." Finally, you'll…

Was this guide helpful?

Related guides

My CRM Data is Loading Slowly What Can I Do?1 min read · 2 imagesEnabling Cross-Site Tracking (3rd Party Cookies)1 min read · 2 imagesRebilling, Reselling, and Wallets Explained14 min read · 19 imagesAlpine HVAC Case Study1 min read