diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 2dd6ed1c76f..26973854d8a 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="uk-flex uk-flex-middle">
-    <oc-spinner v-if="loading" uk-spinner="ratio:1.6" class="uk-margin-small-right" :aria-label="$gettext('Loading avatar')" />
+    <avatar v-if="item.value.shareType === 0" class="uk-margin-small-right" :width="50" :userid="avatar" :userName="item.label" />
     <template v-else>
-      <oc-avatar v-if="item.value.shareType === 0" :src="avatar" class="uk-margin-small-right" :width="50" :userName="item.label" />
-      <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>
+      <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>
     <div class="files-collaborators-autocomplete-user-text">
       <div
@@ -21,6 +18,7 @@
 
 <script>
 import Mixins from '../../mixins/collaborators'
+import Avatar from './Avatar.vue'
 
 export default {
   name: 'AutocompleteItem',
@@ -29,6 +27,9 @@ export default {
   mounted () {
     this.$_ocCollaborators_loadAvatar(this.item)
   },
+  components: {
+    Avatar
+  },
   data () {
     return {
       loading: false,
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 622d5b69cfc..98c687ec34d 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -2,9 +2,8 @@
   <div>
     <div v-if="$_reshareInformation" class="uk-text-meta uk-flex uk-flex-middle uk-margin-small-bottom"><oc-icon name="repeat" class="uk-margin-small-right" /> {{ $_reshareInformation }}</div>
     <div class="files-collaborators-collaborator-information uk-flex uk-flex-wrap uk-flex-middle">
-      <oc-spinner v-if="loading" key="collaborator-avatar-spinner" uk-spinner="ratio:1.6" class="uk-margin-small-right" :aria-label="$gettext('Loading')"/>
-      <div v-else key="collaborator-avatar-loaded">
-        <oc-avatar v-if="collaborator.info.share_type === '0'" :src="avatar" class="uk-margin-small-right" :width="50" :userName="collaborator.displayName" />
+      <div key="collaborator-avatar-loaded">
+        <avatar v-if="collaborator.info.share_type === '0'" class="uk-margin-small-right" :width="50" :userid="collaborator.name" :userName="collaborator.displayName" />
         <div v-else key="collaborator-avatar-placeholder">
           <oc-icon v-if="collaborator.info.share_type === '1'" class="uk-margin-small-right" name="group" size="large" />
           <oc-icon v-else class="uk-margin-small-right" name="person" size="large" />
@@ -27,6 +26,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import Mixins from '../../mixins/collaborators'
+import Avatar from './Avatar.vue'
 
 export default {
   name: 'Collaborator',
@@ -34,11 +34,8 @@ export default {
   mixins: [
     Mixins
   ],
-  data () {
-    return {
-      avatar: '',
-      loading: false
-    }
+  components: {
+    Avatar
   },
   computed: {
     ...mapGetters(['user']),
@@ -65,9 +62,6 @@ export default {
         label: this.$gettext('Unknown Role')
       }
     }
-  },
-  mounted () {
-    this.$_ocCollaborators_loadAvatar(this.collaborator)
   }
 }
 </script>
diff --git a/apps/files/src/store/actions.js b/apps/files/src/store/actions.js
index 5f5d0a72272..8c11a87ac25 100644
--- a/apps/files/src/store/actions.js
+++ b/apps/files/src/store/actions.js
@@ -235,7 +235,6 @@ function _buildShare (s, file) {
     case ('1'): // group share
       share.role = bitmaskToRole(s.permissions, file.type === 'folder')
       share.permissions = s.permissions
-      share.avatar = 'https://picsum.photos/64/64?image=1075' // TODO where do we get the avatar from? by uid? remote.php/dav/avatars/admin/128.png
       share.name = s.share_with // this is the recipient userid, rename to uid or subject? add separate field userName?
       share.displayName = s.share_with_displayname
       // TODO: Refactor to work with roles / prepare for roles API
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index 9e12441de3e..076c4d30000 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="type" v-if="enabled">
-    <oc-avatar :width="width" :loading="loading" :src="avatarSource" :userName="userName" />
+    <oc-avatar :width="width" :src="avatarSource" :userName="userName" />
   </component>
 </template>
 <script>
@@ -35,22 +35,24 @@ export default {
       const url = instance + '/remote.php/dav/avatars/' + this.userid + '/128.png'
       headers.append('Authorization', 'Bearer ' + this.getToken)
       headers.append('X-Requested-With', 'XMLHttpRequest')
-      fetch(url, { headers })
-        .then(response => {
-          if (response.ok) {
-            return response.blob()
-          }
-          throw new Error('Network response was not ok.')
-        })
-        .then(blob => {
-          this.loading = false
-          this.avatarSource = window.URL.createObjectURL(blob)
-        })
-        .catch(error => {
-          this.avatarSource = ''
-          this.loading = false
-          console.log('There has been a problem with your fetch operation: ', error.message)
-        })
+      window.setTimeout(() => {
+        fetch(url, { headers })
+          .then(response => {
+            if (response.ok) {
+              return response.blob()
+            }
+            throw new Error('Network response was not ok.')
+          })
+          .then(blob => {
+            this.loading = false
+            this.avatarSource = window.URL.createObjectURL(blob)
+          })
+          .catch(error => {
+            this.avatarSource = ''
+            this.loading = false
+            console.log('There has been a problem with your fetch operation: ', error.message)
+          })
+      }, 5000)
     }
   },
   watch: {
diff --git a/src/phoenix.js b/src/phoenix.js
index 06a4eed6e90..5a6b394d173 100644
--- a/src/phoenix.js
+++ b/src/phoenix.js
@@ -45,6 +45,8 @@ import { Drag, Drop } from 'vue-drag-drop'
 import DesignSystem from 'owncloud-design-system'
 import 'owncloud-design-system/dist/system/system.css'
 
+import Avatar from './components/Avatar.vue'
+
 import wgxpath from 'wicked-good-xpath'
 wgxpath.install()
 
@@ -61,6 +63,7 @@ Vue.use(VueMeta, {
   // optional pluginOptions
   refreshOnceOnNavigation: true
 })
+Vue.use(Avatar)
 
 Vue.component('drag', Drag)
 Vue.component('drop', Drop)