Fix focus related race conditions

[absidue]

Fix focus related race conditions

Pull Request Type

• Bugfix

Related issue

closes #3444

Description

Fixes errors caused by focus being called on elements that Vue hasn't created yet. setTimeout() with no delay, just makes code run asynchronously, regardless of whether Vue has had time to create the elements or not. When you hold the R key on the trending tab, you trigger the refresh before Vue has had time to modify any HTML, so the element that we want to focus is never created. You might think that using Vue's nextTick() function would be more appropriate, however as that delays until after the next DOM update, it would mean that in this case the code would be triggered multiple times (however many times the refresh finished while you were holding the R key), when you finally let go of the R.

While I was at it, I decided to make the same change in other places that we call focus with a delay, which should hopefully fix similar errors caused by spamming/abusing FreeTube in those areas (looking at you @efb4f5ff-1298-471a-8973-3d47447115dc with your auto clicker 🙄).

Testing

On the trending page, hold the R key and check that no errors appear in the console.

[PikachuEXE]

I found it strange to keep refreshing when I hold down R key
Isn't this another bug? (not saying it should be fixed in this PR)

[absidue]

When you are holding it down, it only listens to the R key again after it has finished loading (you can add console.logs to confirm that). We can add some artificial timeout after the refresh has finished if you want that?

[PikachuEXE]

I only know now keydown event is also fired repeatedly when button is being hold

I guess FT is not using the repeat property?
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat

Reloading continuously on key holding is an unexpected behaviour for me, not sure what other people think