Jonas: There is actually a small bug
in the implementation
of the revealing sections that we just built.
And so let's now find and fix that bug.
So this bug appears when the user reloads the page
while being between two sections here.
So let's go here.
So here is one section and here is the other one.
And if we reload the page here, then you will notice
that these sections haven't been loaded yet.
Well, actually right now, this one is already here,
but not this one.
So then the user needs to scroll around
in order to see this one as well.
Maybe we can see this even better somewhere else.
Well, let's just do it at a slightly different position.
But in any case, you get the point
that these sections here are hidden in the beginning
when we first load the page.
And that is simply because we did hid them in the beginning.
And the revealSection function will not make them visible
at load time in our current solution.
But luckily for us, it's actually a pretty simple fix.
And so let's do that, and here is how we're gonna do it.
So one thing that's important
to know about the IntersectionObserver is
that it will actually observe all of the observed elements.
So all the elements
that it's been set up on in the very beginning
when the DOM first loads.
So in our case, this means
that all sections will be observed at the beginning.
So let me actually show that to you.
Let's give ourselves a bit more space here
and let's get rid of this console.log that we had here,
and let's actually observe
or log to the console all of the entries.
So let's give it a save.
And immediately you see
that we have these four observations here.
That's why we have this array with four elements
where each of them is an IntersectionObserver.
And again, this one happened right at the very beginning.
Then as we keep scrolling, you will see
that we only then get one, which is exactly the one
that we are destructuring here.
So now, instead of destructuring here, so instead
of just taking out the first element of the array
and then remove the hidden section on that,
let's use the fact that in the beginning,
all of the elements are observed.
And so we can simply loop always over this array
and then just run this code here
for all the IntersectionObserver entries.
So in the regular situation
that we just built in the last section,
and where we have just this one element in the array,
nothing is gonna change.
It will simply loop over this array of one
and then perform this code right here.
But what will change is that in the very beginning,
it will also loop over this array of all of the entries.
And so then it will remove this hidden from all of them
as long as they are already intersecting.
So that's what this one here is ensuring.
So otherwise, of course,
all of the sections would already be visible
and the whole effect that we were building would disappear.
All right, but anyway, let's just write the code here.
So we're gonna get rid of this.
And so as I just said, we're gonna take all the entries
and then just run this code for each of them.
So we need to perform some work.
And so that's when we need the forEach method.
Okay, well actually let's leave it like this,
move this all the way to the end, give it a save,
and this should already be enough to fix the problem.
So let's see.
Let's just like before reload here in the middle.
And then now these two sections are actually visible
and the next one not.
So the next one then faded in later.
Beautiful.
Now, I'm not sure if this part here we already built,
because I made this video a little bit later
once I noticed the bug.
But let's try it again a bit earlier, like here.
And so yeah, now this one is already here,
but then the next ones are not,
again, because they weren't intersecting yet anyway.
But that problem that we had earlier,
that is now gone for sure.
Right?
So make sure to always test very thoroughly
the code that you are writing,
and of course the results of it
so that you don't run into bugs like this.
So just getting rid of this console.log,
and now this part is really done
and working just as expected,
and we are ready to move on to the next lecture.