11327/feature/make follow buttons asynchronous

[taearls]

Closes #11327

feature: makes follow buttons work asynchronously

Technical

Testing

I followed the steps here #11327 (comment)

Screenshot

here is the follow button on the /people/openlibrary profile page

Stakeholders

@jimchamp

[jimchamp]

Thanks @taearls! Looks like this is almost ready, but it's not working.

following.js is never imported in index.js, so the initialization function is never called on profile pages. I've left a suggested code change that should fix this.

Be sure to use your browser's dev tools when testing this. Specifically, open the network tab and ensure that the async request is actually occurring.

[jimchamp]

The initAsyncFollowing function is in the following.js file. This block of code imports book-page-lists.js, which does not export this function.

As a result, I'm seeing Possible Unhandled Promise Rejection: TypeError: e.initAsyncFollowing is not a function in the console when I visit a profile page containing a "Follow" button.

Please move the followForms declaration below the if (listSection) block, and add similar to the following (untested) code:

if (followForms.length) {
    import(/* webpackChunkName: "following" */ './following')
        .then(module => {
            module.initAsyncFollowing(followForms)
        })
}

[taearls]

oh woops I think I had it in both by mistake and removed the wrong one. I'll fix that!

[taearls]

I believe I have fixed it. There are a lot of info logs but no warning anymore about the Possible Unhandled Promise Rejection.

[jimchamp]

This doesn't look like it will work. Does the entire page reload when the button is pressed? We do not want that to happen.

In order to give the issue's original assignee a chance to share their work, I'm not going to review or test your changes until tomorrow. You may also want to wait and see if they open a PR before making any more changes to this -- it's up to you.

[taearls]

That's fair. I appreciate your suggestions and patience.

I decided to take a quick look because I was curious. In hindsight, I think I misunderstood when you had suggested to place the new following code below the list section code. I pushed a small change to make the lazy-loaded initAsyncFollowing script separate from the lazy-loaded initListSection script. I think it worked the same way before, but to me it made sense to separate concerns.

From what I can tell, it doesn't appear that the page reloads. If it were reloading the page I would expect document request types for the openlibrary html, and that the page content would flash when I clicked the Follow / Unfollow button. I just see that there's a fetch request with no content in the response.

[jimchamp]

This needs to be here. On book pages we lazy-load the lists section. This hydrates the follow buttons after they are attached to the DOM.

With this code removed, a click on a book page "Follow" button will take the patron to a new page, which is not what we want.

It probably goes without saying, but you'll have to import initAsyncFollowing in this file for this to work.

[taearls]

Fixed

[jimchamp]

Sorry for the massive delay... This is working as expected. Thanks again, @taearls!