UI updates to Dropbox file selector

src/components/dropbox-file-selector/dropbox-file-selector.vue

@@ -32,15 +32,17 @@
             <div v-if="leaf" class="content__wrapper">
                 <div class="breadcrumbs">
                     <!-- parent folders -->
-                    <button v-for="parent in breadcrumbs"
-                            :key="parent.path"
-                            type="button"
-                            @click="handleNodeClick( parent )"
-                    >{{ parent.name || "./" }}</button>
+                    <button
+                        v-for="parent in breadcrumbs"
+                        :key="parent.path"
+                        type="button"
+                        class="breadcrumbs__button"
+                        @click="handleNodeClick( parent )"
+                    >{{ parent.name || "." }}</button>
                     <!-- current folder -->
                     <button
                         type="button"
-                        class="active"
+                        class="breadcrumbs__button breadcrumbs__button--active"
                     >{{ leaf.name }}</button>
                 </div>
                 <div v-if="!loading" class="content__folders">
@@ -369,6 +371,7 @@ $actionsHeight: 74px;
     .content__folders {
         overflow: auto;
         height: calc(100% - #{$heading-height + $actionsHeight});
+        padding-top: $spacing-small;
     }
 
     @include mobile() {
@@ -397,23 +400,29 @@ $actionsHeight: 74px;
 }
 
 .breadcrumbs {
-    padding: $spacing-medium 0;
-    margin-bottom: $spacing-small;
-    background-color: #b6b6b6;
+    padding: $spacing-small 0 $spacing-small $spacing-small;
+    background-color: $color-bg;
 
-    button {
+    &__button {
         display: inline;
         position: relative;
         cursor: pointer;
-        margin-right: $spacing-small;
         border: none;
         background: none;
-        padding: 0 $spacing-small;
-        border-left: 1px solid $color-lines;
+        padding-left: $spacing-xsmall;
+        padding-right: 0;
         font-size: 100%;
         @include customFont();
 
-        &:hover, &.active {
+        &:after {
+            content: " /";
+        }
+
+        &:hover {
+            color: $color-4;
+        }
+
+        &--active {
             color: #FFF;
         }
     }

src/components/file-import/dropbox-connector/dropbox-connector.vue

@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020 - https://www.igorski.nl
+ * Igor Zinken 2020-2022 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -70,7 +70,14 @@ export default {
     },
     async created() {
         this.loading = true;
+
+        // note we wrap the authentication check inside a global loading state as Dropbox
+        // API has been observed to have high latencies
+        const LOADING_KEY = "dbxc";
+        this.setLoading( LOADING_KEY );
         this.authenticated = await isAuthenticated();
+        this.unsetLoading( LOADING_KEY );
+
         if ( this.authenticated ) {
             if ( !this.dropboxConnected ) {
                 this.showConnectionMessage();
@@ -94,6 +101,8 @@ export default {
         ...mapMutations([
             "openDialog",
             "openModal",
+            "setLoading",
+            "unsetLoading",
             "showNotification",
         ]),
         login() {