From 05bda27f89ce3de7069f6b70198d31bb6ec8b3be Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 12 May 2021 12:40:19 +0200
Subject: [PATCH] login-button: show a spinner until the login state is clear

It always seems like the button is missing when loading the page and
expecting the button there based on experience.
---
 packages/auth/src/login-button.js | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index be721d2c..cd638494 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -4,7 +4,7 @@ import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {LoginStatus} from './util.js';
-import {AdapterLitElement} from '@dbp-toolkit/common';
+import {AdapterLitElement, MiniSpinner} from '@dbp-toolkit/common';
 
 let logoutSVG = `
 <svg
@@ -51,17 +51,6 @@ let loginSVG = `
 </svg>
 `;
 
-let loggingInSVG = `
-<svg
-   viewBox="0 0 100 100"
-   y="0px"
-   x="0px"
-   id="icon"
-   role="img"
-   version="1.1">
-</svg>
-`;
-
 export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
 
     constructor() {
@@ -72,6 +61,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
 
     static get scopedElements() {
         return {
+            'dbp-mini-spinner': MiniSpinner,
         };
     }
 
@@ -132,9 +122,12 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
                 transition: background-color 0.15s, color 0.15s;
             }
 
-            .login-box svg {
+            .login-box svg, .icon {
                 width: 1.1em;
                 height: 1.1em;
+            }
+
+            .login-box svg, .spinner {
                 display: flex;
             }
 
@@ -162,7 +155,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
             return html`
                 <a href="#">
                     <div class="login-box login-button">
-                        <div class="icon">${unsafeHTML(loggingInSVG)}</div>
+                        <div class="icon"><dbp-mini-spinner class="spinner"></dbp-mini-spinner></div>
                         <div class="label">&#8203;</div>
                     </div>
                 </a>
-- 
GitLab