"Follow back" button has no text in notification at times

[sivaraam]

Describe the bug
When someone follows me, I get a notification with a "Follow back" button in it. But in some cases, the button has no text in it. As a consequence, it's not clear what the button does.

To Reproduce

1. Go to 'Notifications'
2. Find a "$USER followed you" notification
3. If the "FOLLOW BACK" text in the button in visible, refresh and check.

Note: I realise these aren't ideal steps to reproduce the issue but unfortunately that's all I have. I'm not sure about the exact cases for which the text is visible and for which the text is not. But I'll be glad to provide information, if needed.

Expected behavior
The "FOLLOW BACK" text should always be visible in the button. For me, it's visible only at random times. The probability of the button having no text is higher.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox/Chrome
• Version: 73.0.1/80.0.3987

[rhymes]

Thanks for the issue! We'll take your request into consideration and follow up if we decide to tackle this issue.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @thepracticaldev/oss and we will follow up within 3 business days.

For full info on how to contribute, please check out our contributors guide.

[rhymes]

@sivaraam thanks for the issue report! I was wondering one thing which might be a hunch or not: which of the two light themes are you using?

[sivaraam]

which of the two light themes are you using?

I use the first one. But I just checked now and I'm able to reproduce the issue despite the theme I use. IOW, I also observe this issue when using other themes.

Also, just wanted to add another point regarding the issue. When I inspect the button when the text is visible here is what I get:

<button class="cta follow-action-button showing" data-info="{&quot;id&quot;:208208,&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;follow-back&quot;}" data-follow-action-button="true" data-fetched="fetched" data-verb="unfollow">+ FOLLOW BACK</button>

When I inspect the button when the text is not visible here's what I get:

<button class="cta follow-action-button" data-info="{&quot;id&quot;:208208,&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;follow-back&quot;}" data-follow-action-button="true">
</button>

[Math3v]

@rhymes @sivaraam I'm also experiencing this issue. I have a feeling that the Notification is not properly initialized, because it's not in the DOM when calling initializeAllFollowButts(). I'm not sure what mechanism is used to initialize the notifications page and if they are load all at the same time or not.

Also, if I hard reload the notifications page, the + Follow Back text is visible, but I can see an error in the console

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at initializeFollowButt (base-e205e182769d3b9a457ebdf86713436f1252290673ad61687bdb7ec8f3c485ce.js:1)
    at initializeAllFollowButts (base-e205e182769d3b9a457ebdf86713436f1252290673ad61687bdb7ec8f3c485ce.js:1)

So there might be multiple issues there.

[vaidehijoshi]

+1 for this. Here's what I'm seeing with the pink theme:

Refreshing the page also doesn't help. Looks like the issue is coming from the "follow-action-button":

[arwazkhan189]

Hey @cmgorton, I would like to solve this. Thanks.🙋‍♂️

[cmgorton]

@arwazkhan189 I'll assign you to it! If you get overwhelmed with both issues just let me know and we can unassign you from one of them. Thanks for helping out here 🐛

[squarebat]

Hey everyone, I looked into this issue and could not reproduce it. Follow back is visible every time I refresh. I tried from different browsers and devices with different color themes so I don't think the error is specific to that. Also the style seems to have changed since the issue was posted, currently the Follow Back button gets displayed on the same line as User followed you! and not the next as seen in the screenshots above. A look at app/assets/javascripts/initializers/initializeAllFollowButts.js suggests that this should work at all times. It may have been fixed by PR #8107. If someone can verify that the error is gone, this issue can be closed.

[maestromac]

I also could not replicate this any more. It's safe to assume this is already resolved and we can definitely re-open this if anyone run into this.