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,33 +54,30 @@
 
 	{{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">
-				<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}}
-						{{$provider := index $.OAuth2Providers $key}}
-						<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
-							{{if eq $provider.Name "github"}}
-								{{svg "octicon-mark-github" 40}}
-							{{else if eq $provider.Name "gitlab"}}
-								{{svg "gitea-gitlab" 40}}
-							{{else if eq $provider.Name "openidConnect"}}
-								{{svg "gitea-openid" 40}}
-							{{else}}
-								<img
-									class="gt-object-contain"
-									width="40"
-									height="40"
-									alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
-									src="{{AppSubUrl}}{{$provider.Image}}"
-								>
-							{{end}}
-						</a>
-					{{end}}
-				</div>
+	<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}}
+					{{$provider := index $.OAuth2Providers $key}}
+					<a class="{{$provider.Name}} silenced oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}" data-tooltip-content="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}">
+						{{if eq $provider.Name "github"}}
+							{{svg "octicon-mark-github" 40}}
+						{{else if eq $provider.Name "gitlab"}}
+							{{svg "gitea-gitlab" 40}}
+						{{else if eq $provider.Name "openidConnect"}}
+							{{svg "gitea-openid" 40}}
+						{{else}}
+							<img
+								class="gt-object-contain"
+								width="40"
+								height="40"
+								alt="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
+								src="{{AppSubUrl}}{{$provider.Image}}"
+							>
+						{{end}}
+					</a>
+				{{end}}
 			</div>
 		</div>
 	</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,24 +1,22 @@
 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');
-
-    setTimeout(() => {
-      // recover previous content to let user try again
-      // usually redirection will be performed before this action
-      oauthLoader.addClass('disabled');
-      showElem(oauthNav);
-    }, 5000);
-  });
+  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
+        outer.classList.remove('is-loading');
+        inner.classList.remove('gt-invisible');
+      }, 5000);
+    });
+  }
 }
 
 export function initUserAuthLinkAccountView() {