How to Disable Elementor Panel State Loading

Elementor is a popular WordPress page builder that allows you to easily create beautiful and complex layouts without having to code. However, some users have reported that the Elementor panel state loading animation can be slow and distracting.

If you’re one of those users, then you’ll be happy to know that there’s a way to disable the Elementor panel state loading animation. Here’s how:

1. Open your WordPress dashboard and go to Appearance > Editor.
2. Click on the Elementor tab.
3. In the Settings panel, click on the Advanced tab.
4. Scroll down to the Panel State Loading section and uncheck the Enable Panel State Loading checkbox.
5. Click on the Update button to save your changes.

That’s it! The Elementor panel state loading animation will now be disabled.

Additional Notes:

• If you’re using a child theme, then you may need to add the following code to your child theme’s functions.php file:

function disable_elementor_panel_state_loading() {
    remove_action( 'elementor/frontend/before_panel_state_render', 'elementor_panel_state_loading', 10 );
}
add_action( 'init', 'disable_elementor_panel_state_loading' );

• This code will disable the Elementor panel state loading animation for all pages on your website.
• Here are some frequently asked questions (FAQs) regarding how to disable the elementor-panel-state-loading class in Elementor:

FAQs on Disabling elementor-panel-state-loading

Q1: What is the elementor-panel-state-loading class in Elementor?

A1: The elementor-panel-state-loading class indicates that the Elementor editor is in a loading state. This often occurs when the panel is fetching data or processing changes. While it helps signify a loading process, it can sometimes be visually distracting or create a feeling of lag in the editor.

Q2: Why would I want to disable the elementor-panel-state-loading class?

A2: Disabling this class can enhance the user experience by potentially making the editor feel more responsive. Some users prefer not to see loading indicators if they have a fast internet connection or if they are working with smaller content pieces.

Q3: How can I disable the elementor-panel-state-loading class in Elementor?

A3: You can disable the class using custom JavaScript or jQuery. Add the following code to your theme’s custom JS section or as part of a plugin that allows you to inject custom code:

jQuery(document).ready(function($) {
    // Remove the loading class from the Elementor panel
    $('.elementor-panel-state-loading').removeClass('elementor-panel-state-loading');
});

Make sure to test this in a controlled environment to ensure it doesn’t disrupt the functionality of the Elementor editor.

Q4: Will removing this class affect the performance of Elementor?

A4: Removing the elementor-panel-state-loading class itself won’t improve performance since it merely modifies the user interface. However, it may lead users to believe that Elementor is performing operations faster than it actually is, which can be misleading.

Q5: Can this change be reversed if needed?

A5: Yes, if you want to revert the changes, simply remove the custom JavaScript code that you added to disable elementor-panel-state-loading. You can keep a copy of the original code in a safe place for easy reapplication if you decide to reinstate the loading indicator.

Q6: Is it recommended to disable elementor-panel-state-loading for all users?

A6: It’s not generally recommended for all users to disable this class. While some may prefer a cleaner interface, others may benefit from visual feedback during operations. It’s best to understand the needs of your user base before applying such changes universally.

Q7: What if the loading indicator is not removed after applying the code?

A7: If the indicator is still visible after applying the code, it might be due to caching issues. Try clearing your browser cache, or if you are using a caching plugin in WordPress, clear the cache there as well. You can also check for any JavaScript errors in your console that might be interfering with the code execution.

Q8: Can I use CSS instead of JavaScript to hide the loading indicator?

A8: While you can use CSS to hide elements, it’s generally better to remove the class using JavaScript to ensure that any related functionality isn’t disrupted. However, if you just want to hide it visually without affecting its functionality, you can use:

.elementor-panel-state-loading {
    display: none !important;
}

Conclusion

These FAQs should help clarify the topic and provide guidance on disabling the elementor-panel-state-loading class in Elementor. Always remember to back up your changes and test thoroughly!