Ever since working with Magento 2, I repeatedly have this annoying issue:
- I log in to the admin panel or switch to a different page within the admin panel
- The page starts loading, sometimes shows up partially but then hangs forever (at least for several minutes), sometimes it shows up completely but the browser still indicates "loading" and the navigation does not work, but I don't see failed or running requests in the browser console.
- If I press F5 while it's hanging, the page loads almost instantly (at least most of the time)
It doesn't seem to be related to any events, because I get this behavior even without having done any changes in the admin panel, nor in the code, just navigating. However, I observed a possible correlation with invalidated caches.
Any idea what could cause this issue? I don't believe that it's the typical problems with permissions or cookies because generally speaking the admin panel works.
Magento is running in developer mode on Linux.
Best Answer
UPDATE
It seems like updating Firefox to 46 fixes the issue!
Original investigations
As I'm also facing this annoying problem I decided to give it a try.
Configuration
Replicating the issue
At first sight, this issue looked totally random to me. However after several tests, I managed to find out exactly how to replicate the issue.
Browser
First, I haven't been able to replicate the issue on Google Chrome, Internet Explorer 11 nor the old Windows Safari 5.2.17. I'm mainly using FireFox (45.0.2) and rarely use Google Chrome. Even after I've found exactly how to replicate the issue I haven't been able to replicate on Chrome.
Tabs
You need to have several tabs open on FireFox to be able to replicate the issue.
Steps
Investigation
So it seems like when the client is not focused on the tab of the Admin Panel, Magento 2 seems to not load all the resources for the website to load entirely.
What I have noticed, when I came back to the infinite loading admin panel page is that there was a lot of resources that were successfully loaded.
As Fabian said, no error in the console, no resources still loading and no resources that failed to load. Everything looked like the page had finished loading.
However, when I clicked the stop loading button of Firefox (the X in the URL bar), I noticed that several resources were added in the network tab that were not here when the page was in the infinite loading state
PLEASE NOTE: the screenshot below is only for the dashboard, I've noticed that more resources were loaded after I clicked the stop loading button on the configuration pages for instance.
So for the Dashboard page, those resources were added after I clicked the stop loading button.
When the page is loaded normally, by not switching to another tab, the following resources are loaded after the DOM load (I assume via AJAX), you can notice the thicker grey line between those and the resources above:
So for some reason, the following resources are automatically loaded when the page is in the infinite loading state but are loaded after DOM load when the page loads fine:
/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/modal/modal-popup.html
/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/modal/modal-slide.html
/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/modal/modal-custom.html
/static/adminhtml/Magento/backend/en_US/mage/apply/scripts.js
That's how far I got into my debugging task, I reckon there's still plenty we can do to test and narrow the issue but I didn't have time to make more tests, I'll come back to it when I'll have time.
Further Investigations
So I ended up installing HTTPFox plugin on my FireFox.
Here is what I got when I clicked the stop loading button after 1min of loading (you can see that
jquery.storageapi.min.js
has 59s in the time column). The highlighted rows are the resources that loaded after I stopped the loading:I tried upgrading the jquery.storageapi library with the last version available on GitHub but it does not seem to fix the issue unfortunately.
As the favicon loading was next on the list, I commented the code adding the favicon to the head but it didn't fix the issue either.
I tried to debug the
domReady.js
file as its name sounds like it could be the fault but no chance.Also here are the two
access.log
files:Still can't figure out what's going on here.
Update
I recently made two changes to my installation:
Now I can't replicate the issue anymore.