Removing fake progress bars from Mastodon and GitHub

Mastodon and GitHub have custom progress bars displayed at the top when the content is loading. These progress bar duplicate the spinners and show fake progress not related to any content being loaded. I blocked them with an ad blocker.

Mastodon

I opened @Mastodon@mastodon.social profile in Firefox 147.0.3. mastodon.social was running v4.6.0-nightly.2026-02-06 at the moment. To make nice screenshots I opened Responsive Design Mode with "Galaxy S20 Android 11" preset. There I also enabled Throttling with GPRS preset to simulate slow network. After scrolling the posts made by official Mastodon profile down a bit, I navigated to some post with an image:

Screenshot of the fake Mastodon progress bar and a spinner.

The page started loading, but took a while to finish because of the image inside. When the post navigated to contains an image, it seems Mastodon displays the spinner in place of the post and does not even display the text until the whole post with an image is finished loading. The progress bar meanwhile quickly went to 99% and stayed there. As the page stayed the same, I could select the element and see that it is a div element with "loading-bar" class and width set to 98.8959%.

Screenshot of the DOM and Style Inspector in Firefox, showing loading-bar div element with width set to 98.8959%.

The progress bar is created by react-redux-loading-bar 5.0.8. Project source code is available on GitHub, but it is archived. Inside the source there is a function called simulateProgress called periodically using setInterval every 400 ms. The code roughly translates to this Python code printing all the values that the progress bar goes through:

from math import cos, pi

PROGRESS_INCREASE = 20
MAX_PROGRESS = 99

p = 0.0
while True:
    next_p = p + PROGRESS_INCREASE * cos(p * (pi / 200))
    if next_p <= MAX_PROGRESS:
        p = next_p
        print(f"{p:.4f}")
    else:
        break

It prints all the values that the progress bar goes through:

20.0000
39.0211
55.3803
68.2782
77.8366
84.6596
89.4324
92.7371
95.0139
96.5787
97.6530
98.3902
98.8959

There are also some CSS animations added on top that I have not looked into.

I added these details to the related issue on Mastodon GitHub and removed this progress bar using uBlock Origin by adding this custom rule:

! Block fake `react-redux-loading-bar` progress bar.
! See <https://github.com/mastodon/mastodon/issues/27710> for details.
fosstodon.org##.loading-bar

GitHub

GitHub has a similarly fake progress bar, but using a different implementation. Here is a screenshot of switching from the Code tab to Issues tab:

Screenshot of Code tab for Mastodon repository on GitHub after clicking on the Issues tab. The only indication of the attempted switch is the fake blue progress bar at the top.

This progress bar works differently from Mastodon's. It goes slowly to the end at constant rate, and even when it finishes the page does not load. Inspecting it showed that the progress bar was not only over 100%, but still steadily updating to values over 100%:

Firefox DOM and Style Inspector showing the progress bar element on GitHub page has a width of 137.838%.

GitHub is not open source, but the div element class turbo-progress-bar reveals that it uses Turbo Drive. The source code of the progress bar is open. There is a function called "trickle" that adds randomly 0.0..1.0% to the progress bar. The value is supposed to be scaled to 10%..90% range in the function called refresh. I don't know why it went over 100% in my test and have not investigated why refresh function was not called, but otherwise the behavior matches the source code. I added the following line to by uBlock Origin filters to hide this fake progress bar:

github.com##.turbo-progress-bar

Now on GitHub I have no indication that anything is loading at all. On normal static websites when you navigate to another page, refresh button in Firefox 147.0.3 turns into a cross icon that cancels the request and favicon on the tab is replaced to indicate that the page is loading. On GitHub there is no indication that anything is loading, and the request may even fail in which case I remain on the old page. I don't have a fix for this, but it is still better than having fake progress bar that always shows progress even if nothing is loaded.

Conclusion

Add this to "My filters" tab of uBlock Origin:

! Block fake `react-redux-loading-bar` progress bar.
! See <https://github.com/mastodon/mastodon/issues/27710> for details.
fosstodon.org##.loading-bar
chaos.social##.loading-bar

github.com##.turbo-progress-bar

reddit.com##navigation-indicator

Yes, there is also reddit.com. I wanted to quickly find some example of better progress bar and checked what Reddit does, but discovered they also have fake progress bar built as a web component that goes to the end and stays there. So I blocked it as well and stopped searching.