[bug] 2 adjustments to the comment menu bar

[dalibormrska]

Context

You can see this menu in all the comment sections now.

Describe the bug

1. When I am following replies and I click the menu, for a split-second you can see the "Follow replies" option first. This can be quite confusing.
2. When I open the menu, and I click outside, nothing happens - for users can be quite frustrating.

Expected behaviour

1. No glitch for a split-second
2. Close the menu when clicking outside

[Koppeks]

Hi I would like to work on this issue and solve this bug

[dalibormrska]

Cool, lemme tag @benfurber.

[benfurber]

Awesome, welcome and thanks @Koppeks!

[Koppeks]

Just to let you know, I was unable to access to the frontend project due an error requiring Supabase yarn run start.
I needed to install all the necessary to access the full project Yarn, Docker, Supabase cli, then start both backend and frontend.

I will start now to address this issue 💪

[benfurber]

@Koppeks Just realised we're using react-foco else where in the app, so probably best to use that for the show/hide.

[Koppeks]

The clicks outside the dropdown are already fixed. The real issue is how to remove the flickering in the dropdown follow/unfollow state. I suspect that the problem is the amount of prop drilling in the component itself and the AuthWrapper being executed after the first render.

My solution was to make a followButtonContextProvider and give context to the comment about the following state. I will roll with it and see if that fixes the issue

[benfurber]

@Koppeks Apologies, I'd only scanned the issue before.

Let's do a couple of things.

1. Let's have a PR for the outside dropdown click please.
2. Think more about the flickering issue before trying any changes.

The 'flickering', or more to the point, an incorrect display for a still loading state, is an issue with all the following buttons currently. A context is probably a good idea for all of a users' subscriptions. But first let's think about the loading state. I'm inclined to say for the moment that nothing should be displayed and then have it as a design task to design a better UI as a follow-up activity.

Thoughts?

[Koppeks]

Sure thing, I will create a new issue and push the solution.

After seeing some of the code I thought about some solutions that didn't work for me.

1- Make hasUserSubscribed prop in <FollowButton> always true, that in theory should stop the incorrect display.
2- Create a state inside <FollowButtonAction> to check if the fetch of the subscribe status await subscribersService.isSubscribed(...), then use that state to render the final result when completely fetched.
3- Make a context provider for this particular button, having hasUserSubscribed as main priority. (I didn't get to test it properly).
4- Also as a sidenote inline computing also could be part of the problem someProp={x ? z : y}.

Some extra solutions that may work:

1- Create either local or session storage for comments and retrieve that information as the user navigates. For example, request see post 32 and retrieve all commentsId and ask if the user is following or not, it will take some time to load the first time, then the following requests would be faster.
2- Create a global state, basically do the same as the first solution, but with useContext or Zustand.

Let me know if you want to try some of those yourself or what is the plan