Fix OAuth loading state (#24788)

Fix regression from https://github.com/go-gitea/gitea/pull/24740 where
the loading state was not showing because the `oauth-login-image` class
was removed. Replaced the Fomantic loader with a pure CSS loader and
cleaned up the HTML.

Diff:
https://github.com/go-gitea/gitea/pull/24788/files?diff=unified&w=1


![](https://github.com/go-gitea/gitea/assets/115237/b5b4137f-9821-464b-9777-858fe85d9e03)

Co-authored-by: Giteabot <teabot@gitea.io>

templates/user/auth/signin_inner.tmpl

@@ -54,10 +54,8 @@
 
 	{{if and .OrderedOAuth2Names .OAuth2Providers}}
 	<hr class="ui divider"/>
-	<div class="oauth2 center">
-		<div id="oauth2-login-loader" class="ui disabled centered loader"></div>
-		<div>
-			<div id="oauth2-login-navigator" class="gt-df gt-jc">
+	<div id="oauth2-login-navigator">
+		<div id="oauth2-login-navigator-inner" class="gt-df gt-jc">
 			<span class="gt-self-center gt-mr-3">{{.locale.Tr "sign_in_with"}}</span>
 			<div class="gt-df gt-fw gt-gap-4">
 				{{range $key := .OrderedOAuth2Names}}
@@ -83,7 +81,6 @@
 			</div>
 		</div>
 	</div>
-	</div>
 	{{end}}
 	</form>
 </div>

web_src/css/modules/animations.css

@@ -46,6 +46,11 @@ code.language-math.is-loading::after {
   height: 1.25rem;
 }
 
+#oauth2-login-navigator.is-loading::after {
+  width: 40px;
+  height: 40px;
+}
+
 @keyframes fadein {
   0% {
     opacity: 0;

web_src/js/features/user-auth.js

@@ -1,25 +1,23 @@
 import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.js';
 
 export function initUserAuthOauth2() {
-  const $oauth2LoginNav = $('#oauth2-login-navigator');
-  if ($oauth2LoginNav.length === 0) return;
-
-  $oauth2LoginNav.find('.oauth-login-image').on('click', () => {
-    const oauthLoader = $('#oauth2-login-loader');
-    const oauthNav = $('#oauth2-login-navigator');
-
-    hideElem(oauthNav);
-    oauthLoader.removeClass('disabled');
-
+  const outer = document.getElementById('oauth2-login-navigator');
+  if (!outer) return;
+  const inner = document.getElementById('oauth2-login-navigator-inner');
+
+  for (const link of outer.querySelectorAll('.oauth-login-link')) {
+    link.addEventListener('click', () => {
+      inner.classList.add('gt-invisible');
+      outer.classList.add('is-loading');
       setTimeout(() => {
         // recover previous content to let user try again
         // usually redirection will be performed before this action
-      oauthLoader.addClass('disabled');
-      showElem(oauthNav);
+        outer.classList.remove('is-loading');
+        inner.classList.remove('gt-invisible');
       }, 5000);
     });
   }
+}
 
 export function initUserAuthLinkAccountView() {
   const $lnkUserPage = $('.page-content.user.link-account');