No loading state between app.authenticationComplete and window.location.reload

[clarkwinkelmann]

Bug Report

Current Behavior
After the oauth popup closes and before the Flarum single page app reloads for login, there is no loading indicator.

Steps to Reproduce

1. Increase network delay using dev tools for best effect
2. Login with any provider with an account already registered in Flarum
3. See popup closes
4. Browsers shows network activity
5. Page continues to show login modal until page reloads

Expected Behavior
The page should have a clear indicator of something happening in addition to browser network feedback.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment

• Flarum version: not relevant
• Extension version: 1.1.1
• Website URL: not relevant
• Webserver: not relevant
• Hosting environment: not relevant
• PHP version: not relevant
• Browser: not relevant

Possible solution(s)
Technically, this could be considered a Flarum issue because the problem is related to the app.authenticationComplete() method called by the popup code returned by Flarum's https://github.com/flarum/framework/blob/main/framework/core/src/Forum/Auth/ResponseFactory.php . This code then calls the javascript at https://github.com/flarum/framework/blob/6df4101bae0ef89f0bab6ab557080b6d9995bb5b/framework/core/js/src/forum/ForumApplication.ts#L165 which calls window.location.reload().

While the browser will give feedback to the user that the page is reloading, most browsers will still let the user interact with the page and it might not be super obvious.

I think there are 2 options:

• Disable entire page (semi-transparent backdrop in front of content for example).
• Disable all social login buttons and/or show loading spinner in the buttons or in place of them.

The first solution might actually be better implemented in core itself since it impacts all extensions that use ResponseFactory and app.authenticationComplete(). However it would remove flexibility from extensions that want to use those methods and have a different feedback during login.

The second solution could be implemented with a global variable or variable on the app object that we update by extending app.authenticationComplete. Then we can trigger a redraw and use that value to show a loading spinner in the login modal.

One further problem could be if the page reload fails for some reason and we want to reset the loading state. I'm not sure if that can happen. If the page cannot reload, I think most browsers will show a new error page so Flarum wouldn't be visible at this point anymore.

Whatever solution is implemented might break the real time login extension https://github.com/FriendsOfFlarum/realtimelogin

Additional Context
Reported at https://discuss.flarum.org/d/25182-friendsofflarum-oauth