Making Your Dashboard Less Dumb on Slow Internet

I work from home. I’ve got two ISPs-a 600mbps backup Globe fiber and a 1gbps main PLDT fiber. Basically, I live in the future. Meanwhile, back at the office, people keep ranting that the site is slow. I’m like, “Really? Slow?”

So I check it out. Turns out there are 13 to 14 people in the office all on 20 to 30mbps Converge, and suddenly the site feels like it’s moving in slow motion.

Plot twist: It’s not the site. It’s their internet.

I wanted to flip a table, but instead I made a system that actually tells people what’s going on.

Meet the Heroes

To tame all this chaos, I wrapped the app in a neat little thing:

export default AppErrorHandlers;

• BundleErrorHandler is my little “other blog post someday” project. Let’s ignore that for now.

• NetworkStatusHandler is the one that checks if the user is offline or online. Perfect for people who think refreshing 5 times will magically fix the internet.

• SlowConnectionHandler detects if the connection is slow or very slow, and adjusts the UI accordingly. Basically, it’s like a digital bouncer saying “Slow internet? Sorry, no party for you.”

Smarter Pagination Because People Love to Overfetch

const paginationOptions = isVerySlow
  ? [{ text: '10', value: 10 }]
  : isSlow
    ? [
        { text: '10', value: 10 },
        { text: '25', value: 25 },
        { text: '50', value: 50 },
      ]
    : [
        { text: '10', value: 10 },
        { text: '25', value: 25 },
        { text: '50', value: 50 },
        { text: '100', value: 100 },
      ];

Very slow connection? You only get 10 rows. That’s it. No negotiating.

Page Size Capping

Even if someone stubbornly selects more, we cap it.

const pageSize = isVerySlow ? Math.min(limit, 10) : limit;

Because letting them load 100 rows on 2G is basically sending them straight to internet hell.

Notifications That Make People Realize It’s Their Wi-Fi

Here’s my favorite part. I added a notification that tells the user:

• Your internet is slow

• Your internet went offline

Suddenly, office rants go from:

“The site is slow!”

to:

“Oh… turns out it’s my 25mbps Converge struggling with 14 tabs open”

And yes, this includes all the usual stuff, YouTube, Netflix, whatever else they were trying to stream while using the dashboard.

It’s funny, it’s educational, and honestly a little satisfying.

Scaling Features Based on Connection

Animations, auto-refresh, high-res images, they all get downgraded if the connection is trash.

const features = {
  enableAnimations: !isSlow,
  enableHighResImages: !isSlow,
  enableAutoRefresh: !isVerySlow,
};

Slow internet? UI chills.
Very slow? UI goes minimal.
Fast internet? Go nuts.

Lessons Learned

• Most users are not on fiber

• Dashboards are greedy with data

• Performance is a UX feature

• Sometimes the best optimization is just doing less

• Making people aware it’s their internet, not the site, is peak troll energy

TL;DR

With NetworkStatusHandler and SlowConnectionHandler:

• Detect offline / online status

• Detect slow and very slow connections

• Adjust pagination, features, and page size automatically

• Notify the user, gently shaming their Wi-Fi

And yes, it’s funny watching people realize it’s their internet, not the dashboard, that’s the problem.