fix: add loading placeholder for social-login to auth-panel

digris · Dec 14, 2022 · a0131f2 · a0131f2
1 parent 7166a89
commit a0131f2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/core/api_extra/serializers.py b/core/api_extra/serializers.py
@@ -53,7 +53,9 @@ class Meta:
         abstract = True
 
 
-@extend_schema_field(OpenApiTypes.NUMBER,)
+@extend_schema_field(
+    OpenApiTypes.NUMBER,
+)
 class DurationInSecondsSerializer(
     serializers.Serializer,
 ):

diff --git a/core/electronic_mail/templates/electronic_mail/base.html b/core/electronic_mail/templates/electronic_mail/base.html
@@ -12,7 +12,7 @@
   </style>
 </head>
 <body
-  style="font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Oxygen, Cantarell, sans-serif; background: #f5f5f5;"
+  style="font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Oxygen, Cantarell, sans-serif;"
 >
 <table
   cellspacing="0"

diff --git a/src/components/account/AuthSidebar.vue b/src/components/account/AuthSidebar.vue
@@ -72,8 +72,12 @@ export default defineComponent({
 }
 
 .auth-panel {
-  min-height: 100%;
   overflow-y: auto;
+
+  @include responsive.bp-medium {
+    min-height: 100%;
+    margin-bottom: 4rem;
+  }
 }
 
 .section.availability {

diff --git a/src/components/account/SocialLogin.vue b/src/components/account/SocialLogin.vue
@@ -6,6 +6,7 @@ import imgApple from "@/assets/brand-icons/apple.svg";
 import imgDeezer from "@/assets/brand-icons/deezer.svg";
 import imgGoogle from "@/assets/brand-icons/google.svg";
 import imgSpotify from "@/assets/brand-icons/spotify.svg";
+import IconLoading from "@/components/ui/icon/IconBuffering.vue";
 import { useDevice } from "@/composables/device";
 
 const ICONS = {
@@ -24,6 +25,9 @@ interface Backend {
 }
 
 export default defineComponent({
+  components: {
+    IconLoading,
+  },
   props: {
     next: {
       type: String,
@@ -100,6 +104,9 @@ export default defineComponent({
         </i18n-t>
       </div>
     </section>
+    <section v-else class="backends backends--loading">
+      <IconLoading />
+    </section>
   </div>
 </template>
 
@@ -108,12 +115,20 @@ export default defineComponent({
 
 .social-login {
   .backends {
+    min-height: 48px;
     display: grid;
     grid-gap: 1rem;
     grid-template-columns: repeat(2, 1fr);
     margin-bottom: 2rem;
     @include responsive.bp-medium {
       grid-template-columns: repeat(1, 1fr);
+      min-height: 108px;
+    }
+
+    &--loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }