Merge pull request #1457 from nextcloud/poc-cache-hasavatar

Cache hasAvatar info in sessionStorage to avoid flicker

package.json

@@ -38,6 +38,7 @@
 	"dependencies": {
 		"@nextcloud/auth": "^1.2.3",
 		"@nextcloud/axios": "^1.3.2",
+		"@nextcloud/browser-storage": "^0.1.1",
 		"@nextcloud/capabilities": "^1.0.2",
 		"@nextcloud/dialogs": "^3.0.0",
 		"@nextcloud/event-bus": "^1.1.4",

src/components/Avatar/Avatar.vue

@@ -90,6 +90,7 @@
 </template>
 
 <script>
+import { getBuilder } from '@nextcloud/browser-storage'
 import { directive as ClickOutside } from 'v-click-outside'
 import PopoverMenu from '../PopoverMenu'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -100,6 +101,20 @@ import Tooltip from '../../directives/Tooltip'
 import usernameToColor from '../../functions/usernameToColor'
 import { userStatus } from '../../mixins'
 
+const browserStorage = getBuilder('nextcloud').persist().build()
+
+function getUserHasAvatar(userId) {
+	const flag = browserStorage.getItem('user-has-avatar.' + userId)
+	if (typeof flag === 'string') {
+		return Boolean(flag)
+	}
+	return null
+}
+
+function setUserHasAvatar(userId, flag) {
+	browserStorage.setItem('user-has-avatar.' + userId, flag)
+}
+
 export default {
 	name: 'Avatar',
 	directives: {
@@ -476,17 +491,34 @@ export default {
 				urlGenerator(this.user, this.size * 4) + ' 4x',
 			].join(', ')
 
+			// skip loading
+			const userHasAvatar = getUserHasAvatar(this.user)
+			if (typeof userHasAvatar === 'boolean') {
+				this.isAvatarLoaded = true
+				this.avatarUrlLoaded = avatarUrl
+				if (!this.isUrlDefined) {
+					this.avatarSrcSetLoaded = srcset
+				}
+				if (userHasAvatar === false) {
+					this.userDoesNotExist = true
+				}
+				return
+			}
+
 			const img = new Image()
 			img.onload = () => {
 				this.avatarUrlLoaded = avatarUrl
 				if (!this.isUrlDefined) {
 					this.avatarSrcSetLoaded = srcset
 				}
 				this.isAvatarLoaded = true
+				// re-get to avoid concurrent access
+				setUserHasAvatar(this.user, true)
 			}
 			img.onerror = () => {
 				this.userDoesNotExist = true
 				this.isAvatarLoaded = true
+				setUserHasAvatar(this.user, false)
 			}
 
 			if (!this.isUrlDefined) {