The Elementor Editor Shows an Endlessly Loading Gray Screen

Under certain circumstances, the Elementor Editor may not load, instead displaying an endlessly loading gray screen. Let’s take a look at what the problem is, and how you can resolve it.

Why does this happen?

 The endlessly loading error can occur for the following reasons: 

• A conflict between the Elementor Core and Elementor Pro versions installed on your site.
• A conflict with another plugin
• An experimental Elementor feature
• A preloader activated in your theme
• A conflict with a browser addon or extension
• The browser settings have been altered by modifying X-frame restrictions and/or cross-origin security policies.
• An issue with your Cloudflare settings (for Cloudflare users only)   

How to solve the problem

Try the following steps, in order, to solve this issue.  

1. Ensure that your Elementor and Elementor Pro versions are up-to-date. 
2. Find any potential conflicts with third-party plugins by restarting Elementor in Safe Mode, which loads Elementor without any plugins. If this works, isolate the problematic plugin by disabling all your plugins (except Elementor and Elementor Pro) and then re-enabling them one at a time. If you isolate the problematic plugin, keep it disabled and notify Elementor of the issue.
3. Elementor experiments are features that have not been officially released yet. If you are still experiencing problems, try turning off these experimental features. If you’re using any experiments, try activating them one at a time to isolate the one causing an issue. Leave this experiment inactive and contact Elementor with the details.
4. If your theme uses a preloader, you may need to disable the preloader within the theme’s options or within the Customizer. To do this:
   1. Go to Appearance>Themes from the WordPress dashboard.
   2. Click the Customize button on the theme you’re using.
   3. Click Customize CSS and add the code #preloader{display:none !important;}
5. Check to see if the issue is due to X frame restrictions and/or cross-origin issues. You can do this by checking the error messages of your browser console. If you see error messages (in red), you’ll need to change the X-frame option from DENY to SAMEORIGIN. This is done through your hosting company. If you have an Elementor Cloud Website, open a ticket with Elementor support.
6. Determine if the problem is with a plugin or addon to your browser. Check for this by trying to edit with Elementor using a different browser. 
7. If you use Cloudflare, you may need to either switch off Rocket Loader or add rules to Cloudflare. When Rocket Loader is activated it can take time to load the Elementor Editor – causing a perpetually loading and sometimes you will get stuck on the gray loading page. Click here for a solution. The cache of Cloudflare can also prevent your browser from recognizing the new versions of Elementor and Elementor pro so make sure that you clear/deactivate your cache before updating the plugins.

Additional tips

For more troubleshooting tips, check out this article about what to do when Safe Mode isn’t solving your problem.