diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 0151e7d850f..7c58b6da2a7 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class="uk-flex uk-flex-middle">
-    <oc-avatar :src="avatar" class="uk-margin-small-right" width=50 height=50 />
+  <div class="uk-flex uk-flex-middle uk-light">
+    <oc-spinner v-if="loading" uk-spinner="ratio:1.6" class="uk-margin-small-right" />
+    <template v-else>
+      <oc-avatar v-if="avatar" :src="avatar" class="uk-margin-small-right" width=50 height=50 />
+      <template v-else>
+        <oc-icon v-if="item.value.shareType === 1" class="uk-margin-small-right" name="group" size="large" />
+        <oc-icon v-else class="uk-margin-small-right" name="person" size="large" />
+      </template>
+    </template>
     <div>
       <div class="uk-text-bold files-collaborators-autocomplete-username">{{ item.label }}</div>
       <span class="uk-text-meta">{{ $_ocCollaborators_collaboratorType(item.value.shareType) }}</span>
@@ -20,6 +27,7 @@ export default {
   },
   data () {
     return {
+      loading: false,
       avatar: ''
     }
   }
diff --git a/apps/files/src/components/Collaborators/mixins.js b/apps/files/src/components/Collaborators/mixins.js
index 0fbdb351a22..a761d70029a 100644
--- a/apps/files/src/components/Collaborators/mixins.js
+++ b/apps/files/src/components/Collaborators/mixins.js
@@ -41,30 +41,31 @@ export default {
       this.toggleCollaboratorsEdit(true)
     },
     $_ocCollaborators_loadAvatar (item) {
+      if (item.value.shareType === 1 || item.value.shareType === 3) return
+
       const dav = this.$client.helpers._davPath
       const headers = new Headers()
       const url = `${dav}/avatars/${item.value.shareWith}/128.png`
 
       headers.append('Authorization', 'Bearer ' + this.getToken)
+      this.loading = true
 
-      if (item.value.shareType === 0 || item.value.shareType === '0') {
-        fetch(url, { headers })
-          .then(response => {
-            if (response.ok) {
-              return response.blob()
-            }
-            throw new Error('Network response was not ok.')
-          })
-          .then(blob => {
-            this.avatar = window.URL.createObjectURL(blob)
-          })
-          .catch(_ => {
-            this.avatar = ''
-          })
-        return
-      }
-
-      this.avatar = ''
+      fetch(url, { headers })
+        .then(response => {
+          if (response.ok) {
+            return response.blob()
+          }
+          throw new Error('Network response was not ok.')
+        })
+        .then(blob => {
+          this.avatar = window.URL.createObjectURL(blob)
+        })
+        .catch(_ => {
+          this.avatar = ''
+        })
+        .finally(_ => {
+          this.loading = false
+        })
     }
   }
 }
diff --git a/package.json b/package.json
index 072dbda83e4..5fe26773a5e 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "node-fetch": "^2.6.0",
     "npm-run-all": "^4.1.5",
     "oidc-client": "https://github.com/DeepDiver1975/oidc-client-js#d6305cf25dd6a756dae50aaa1982a4b46522adbe",
-    "owncloud-design-system": "^1.0.0-865",
+    "owncloud-design-system": "^1.0.0-883",
     "owncloud-sdk": "1.0.0-308",
     "parse-json": "^5.0.0",
     "requirejs": "^2.3.6",
diff --git a/yarn.lock b/yarn.lock
index d45ce7e4183..2343e6e4011 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2543,13 +2543,13 @@ cucumber@cucumber/cucumber-js#issue-727-retry:
     cucumber-expressions "^7.0.0"
     cucumber-tag-expressions "^1.1.1"
     duration "^0.2.1"
-    escape-string-regexp "^2.0.0"
-    figures "^3.0.0"
-    gherkin "5.0.0"
+    escape-string-regexp "^1.0.5"
+    figures "2.0.0"
+    gherkin "^5.0.0"
     glob "^7.1.3"
-    indent-string "^4.0.0"
+    indent-string "^3.1.0"
     is-generator "^1.0.2"
-    is-stream "^2.0.0"
+    is-stream "^1.1.0"
     knuth-shuffle-seeded "^1.0.6"
     lodash "^4.17.11"
     mz "^2.4.0"
@@ -2558,7 +2558,7 @@ cucumber@cucumber/cucumber-js#issue-727-retry:
     serialize-error "^4.1.0"
     stack-chain "^2.0.0"
     stacktrace-js "^2.0.0"
-    string-argv "^0.3.0"
+    string-argv "0.1.1"
     title-case "^2.1.1"
     util-arity "^1.0.2"
     verror "^1.9.0"
@@ -2605,9 +2605,9 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
-"davclient.js@git+https://github.com/owncloud/davclient.js.git":
+"davclient.js@https://github.com/owncloud/davclient.js.git":
   version "0.1.3"
-  resolved "git+https://github.com/owncloud/davclient.js.git#07237a4bb813eb19e19e322e2457ce216721d529"
+  resolved "https://github.com/owncloud/davclient.js.git#07237a4bb813eb19e19e322e2457ce216721d529"
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -6386,10 +6386,10 @@ output-file-sync@^2.0.0:
     is-plain-obj "^1.1.0"
     mkdirp "^0.5.1"
 
-owncloud-design-system@^1.0.0-865:
-  version "1.0.0-865"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.0.0-865.tgz#5f83fde4d8a2653860eb5180495f532058671b65"
-  integrity sha512-HUJBpKUaMRMxMYSeDgxg2zE3wh1YZgAXi2Gq6LRZIgvLbjhrDN5gdLsMr6GpSKOl5aGLsjxxMY04V9KJjOpHlw==
+owncloud-design-system@^1.0.0-883:
+  version "1.0.0-883"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.0.0-883.tgz#97be076efb2d0b9cbe9c5d2a75e2bda84dee87fc"
+  integrity sha512-sKb9Ao63KX1cUh47ytY1zlxrQjNgbeXhibWCbJkc76X2OzvyJr5qXPE+v22sLTyrpN2GYg9qFUbDJFdDhLP4pA==
   dependencies:
     lodash "^4.17.11"
     mini-css-extract-plugin "^0.7.0"