Wow! Ok, I learned something new today. One of my users was having issues logging into my site on their mobile device and they would always get a blank white screen and nothing would happen. I walked them through a handful of steps and I couldn't get it to work for them. When I accessed their account through my phone it worked just fine, but what we figured out is that there was a bottleneck of data and it was preventing the page from loading, except when I was on my phone because I was on my wifi. Oh, the joys. Anyway, here is how we fixed it.

The Problem

• This user has a lot of data that loads on their dashboard upon initial login. For instance, they have a calendar, and the calendar loads all their events (800 to be exact). That was one of the problems, instead of loading just the current month events, I was loading all events.

On our <full-calendar /> component we were adding events via a prop like below.

:events="events.records"

This events.records was querying the database for all events and I found a better way!

The Solution

When adding events to your <full-calendar /> component, you have multiple ways to do it. I was doing it via an array in an events object, instead what you want to do is add the events via a JSON feed and I'll explain why but check out the snippet of code below, this is how it's done.

eventSources: [
        {
          url: '/test_events',
          method: 'GET',
          failure: function() {
            alert('there was an error while fetching events!');
          },
          color: 'yellow',   // a non-ajax option
          textColor: 'black' // a non-ajax option
        },
]

And we can use that in our component like such
<full-component :event-sources="eventSources" />. When you use a JSON feed like this it automatically adds a start and end query parameter to the URL which allows you to query the data based on those two parameters this way your only getting what you need. Here's what the URL would look like.
https://localhost/calendar_events?start=2020-08-30T00%3A00%3A00-04%3A00&end=2020-10-11T00%3A00%3A00-04%3A00

Now, instead of running this query:

$events = $request->user()->events()->get();
return response()->json($events);

Which would return all results, we can run this query:

$start = $request->start;
$end = $request->end;
$events = $request->user()->events()->whereBetween('start', [$start, $end])->get();

return response()->json($events);

Which only returns results based on the given parameters.

Conclusion

When using Laravel make sure to use the Laravel debug bar package in order to help you catch stuff like this. Hopefully, this article helps someone out in the future from making this same mistake and if you know of a way to improve this even more please let me know in the comment below.