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.
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.
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.
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.
Custom CSS and JS can impact the loader's behavior and overall functionality. Here's an explanation of their potential implications.
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 (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.
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.
If your page gets stuck on the verification page after entering the code on the login screen, you can click on the paint icon with a red cross located on the right side of the search bar. Clicking on that icon will prompt a popup. Enable the ‘Allow Cookies for this site’ option, click on 'Done', and then refresh the page.
If you are facing issue with your dashboard loading slowly or it takes a while for the data to show up on a specific module, please follow the troubleshooting steps below:
1. Login using an incognito window and check if it is still happening.
If this does not resolve the issue, it has something to do with the browser cache. Please proceed to the next step below
2. Please clear the browser cache and reload the page. You will need to sign in again.
Chrome: chrome://settings/siteData
Edge: edge://settings/clearBrowserData?search=cache
If you do not see your browser, please google further instructions on how to clear your cookies/ cache
3. If the issue is still happening, this might be because of an extension(s) installed on your browser. You will need to disable all the extensions and check again.
4. Try different browsers like Firefox or Safari or Chrome. If it still fails, follow the next step.
