Common Case File #1: How to Fix the Loading Circle of Doom

Like a veteran P.I. in a noir film, HubSpot Support has been around a while and has seen a few things. And just like with any good noir detective, we tend to have cases that stick with us and that we keep running into. But just because an issue doesn't get covered in a specific Academy article, should that prevent us from sharing the knowledge we gain from those cases? Of course not!

So read on for the first installment from the "Common Case File," a series where we reveal the surprisingly simple solutions to seemingly impossible issues. Today's post will feature a fix for the loading circle of doom. 

The Frustrating Issue

Outside of the imminent robot uprising, there's nothing scarier in the world of technology than the never-ending loading symbol. It always seems to strike out of nowhere and especially when you're feeling most productive. You've set yourself up to complete a task you've done a thousand times before, something you could do with your eyes closed and one hand tied behind your back. And then, when you open the application you're using, you run into some version of this:

Goodbye, productivity. Something is broken, seemingly for no reason at all. To make it even more frustrating, the loading symbol prevents you from playing around in the application to try to figure out what might be going wrong in the first place.

You may have run into this loading symbol conundrum in the HubSpot page editors, where it looks like this:

But before you start to freak out, know this: your browser isn't broken and your computer isn't possessed by demons that delight in destroying your workflow. There's actually a really quick fix to this most frustrating of issues.

The Surprisingly Simple Fix

Your template is almost certainly missing one or two lines of code. In a template built through the drag-and-drop Template Builder, there are certain required elements that are included behind the scenes. But when you use a custom HTML template, you have full access to all of those elements, and sometimes they can be accidentally deleted, or maybe your HTML template was built from scratch and one or two of those integral parts was never added. Either way, if those required elements are missing from the template, you'll run into the Loading Circle of Doom, and you won't be able to edit any page that uses that template.

So, what are these missing lines of code that are causing such a big fuss? Surely they must be incredibly complex if, without them, the editor is inaccessible. Well, not quite:

Adding those two little lines of code to your template and publishing the updated version will banish the Loading Circle of Doom and allow you to edit your page once more. To be a little more clear, you'll want to put the "header" line in the head section:

And the "footer" line in the footer section:

But once those changes are made, that's really it! You can get your productivity train back on the tracks and you won't have to clean up any computer bits that had been smashed in frustration. Win-win! And to learn more about those required variables and the HTML elements behind HubSpot's templates, check out this article from our Designers site.