Grid doesn't load on the first page load, or on update

[palmerev]

I am loading the calendar using the example code in the README:

<!-- Prepare a container for your calendar. -->
<script
  src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"
</script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
  rel="stylesheet"
  href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    GitHubCalendar(".calendar", "palmerev");
</script>

When I first load the page, the basic contribution data loads into the calendar, but the grid doesn't load. I waited about 10 minutes, but the spinner just keeps spinning. If I refresh the page, then it loads immediately. If I visit the page again for the same user, then it always loads immediately.

The first page visit:

After refreshing, or visiting the page again:

I am running a local Python/Django development server.

The same thing happens when I visit this site, which has the calendar embedded. The first time I visited, no grid, and the spinner just spins. Refresh or visit again, and it loads correctly:
http://themes.3rdwavemedia.com/demo/developer/tom-najdek/

I can do this for any username and it's the same. The grid doesn't load the first time.
I've tested in Chrome and Firefox with 4 different usernames. Clearing browsing data has no effect.

UPDATE: It turns out that this also happens whenever a new contribution is made. If the response returns the spinner image instead of the grid SVG, then it won't change unless the request is made again. To fix this, it should test if the response contains the spinner image and if it does, make the request again. I can submit a pull request soon.

[IonicaBizau]

Hmm, right.

It should be fixed here–if the response doesn't contain svg stuff (or svg contribution squares), then run that request again. 🔮

[palmerev]

To me, this looks the same as before.

cal.querySelector(".left.text-muted").innerHTML = options.summary_text;

The .left.text-muted element always shows up, regardless of whether the spinner or the svg grid loads,
so I don't think this fixes it. The version on my fork recursively repeats the fetch until the svg loads.
I'd like to submit a pull request if that's ok.
UPDATE: the code should probably do a second setTimeout before requesting again. I'll change it soon.

[IonicaBizau]

@palmerev Interesting. The code looks good. But like you said, a timeout would be good.

Also, this check should be moved here, meaning, do not change the HTML unless we got the calendar. 💫

[palmerev]

This has the timeout and moves the check to before the HTML update.

Also, side question: How do you highlight lines in files like you're doing in your comment? I see line numbers added to the URL, but is there another way?

[IonicaBizau]

@palmerev Nice work! ✨

You have to click the line number. If you want to select multiple lines, hold shift and click another line to select a range. 🚀