Merge pull request #5462 from SDU-eScience/issue-5085

Fixes #5085

Author: DanThrane

frontend-web/webclient/app/Applications/ApiTokens/ApiTokensBrowse.tsx

@@ -100,6 +100,10 @@ export function ApiTokenBrowse(props: {opts?: ResourceBrowserOpts<Api.ApiToken>}
                     row.stat3.style.marginTop = row.stat3.style.marginBottom = "auto"
                 });
 
+                browser.on("endRenderPage", () => {
+                    SimpleAvatarComponentCache.fetchMissingAvatars();
+                });
+
                 browser.on("generateBreadcrumbs", () => [{title: browser.resourceName, absolutePath: ""}]);
 
                 browser.on("renderEmptyPage", reason => {

frontend-web/webclient/app/AvataaarLib/hook.ts

@@ -40,10 +40,14 @@ export class AvatarState extends UState<AvatarState> {
         this.updateCache([username]);
         return this.cache[username] ?? defaultAvatar;
     }
-    
+
     avatarFromCache(username: string): AvatarType {
         return this.cache[username] ?? defaultAvatar;
     }
+
+    setAvatar(username: string, avatar: AvatarType) {
+        this.cache[username] = avatar;
+    }
 }
 
 export const avatarState = new AvatarState(2); // Two, otherwise we can't fetch by invites and projectmembers in the Members.tsx file. Maybe higher needed at some point?

frontend-web/webclient/app/Files/Shares.tsx

@@ -70,14 +70,14 @@ function inviteLinkFromToken(token: string): string {
 
 
 export const SimpleAvatarComponentCache = new class {
-    defaultAvatar: ReactStaticRenderer;
+    private defaultAvatarURL: string;
     private svgCache: SvgCache;
 
     constructor() {
         this.svgCache = new SvgCache();
-        new ReactStaticRenderer(() =>
-            <Avatar style={{height: "40px", width: "40px"}} avatarStyle="Circle" {...defaultAvatar} />
-        ).promise.then(it => this.defaultAvatar = it)
+        this.svgCache.renderSvg("__defaultAvatar__", () => {
+            return <Avatar style={{height: "80px", width: "80px"}} avatarStyle="Circle" {...defaultAvatar} />;
+        }, 80, 80);
     }
 
     private componentCache: Record<string, ReactStaticRenderer> = {};
@@ -106,9 +106,15 @@ export const SimpleAvatarComponentCache = new class {
         this.componentCache[username] = avatar;
     }
 
+    deleteCachedAvatar(username: string) {
+        delete this.componentCache[username];
+        // HACK(Jonas): A way of clearing an outdated entry in the cache.
+        delete this.svgCache["cache"]["cache"][username];
+    }
+
     async appendTo(el: HTMLElement, username: string, tooltipText: string, wrapperStyle?: Partial<CSSStyleDeclaration>): Promise<HTMLDivElement> {
         this.addToBeFetch(username);
-        const avatar = avatarState.avatarFromCache(username);
+        const avatar = avatarState.avatar(username);
         const isDefaultAvatar = avatar === defaultAvatar;
         const avatarWrapper = createHTMLElements<HTMLDivElement>({tagType: "div", style: wrapperStyle});
         el.append(avatarWrapper);
@@ -120,11 +126,11 @@ export const SimpleAvatarComponentCache = new class {
         } else {
             // NOTE(Dan): Rasterize at double resolution. This has a clear impact on image quality and little
             // impact on performance.
-            const avatarCompUrl = await this.svgCache.renderSvg(username, () => {
+            const avatarCompUrl = isDefaultAvatar ? this.defaultAvatarURL : await this.svgCache.renderSvg(username, () => {
                 return <Avatar style={{height: "80px", width: "80px"}} avatarStyle="Circle" {...avatar} />;
             }, 80, 80);
 
-            const avatarComponent = isDefaultAvatar ? this.defaultAvatar : await new ReactStaticRenderer(() => {
+            const avatarComponent = await new ReactStaticRenderer(() => {
                 return <div style={{
                     width: "40px",
                     height: "40px",

frontend-web/webclient/app/UserSettings/Avataaar.tsx

@@ -15,6 +15,7 @@ import {AvatarType, defaultAvatar} from "@/AvataaarLib";
 import Avatar from "@/AvataaarLib/avatar";
 import {SidebarTabId} from "@/ui-components/SidebarComponents";
 import {sendFailureNotification} from "@/Notifications";
+import {SimpleAvatarComponentCache} from "@/Files/Shares";
 
 function Modification(): React.ReactNode {
     const [avatar, setAvatar] = React.useState(defaultAvatar);
@@ -46,8 +47,9 @@ function Modification(): React.ReactNode {
                     ml="auto"
                     mr="auto"
                     onClick={async () => {
+                        SimpleAvatarComponentCache.deleteCachedAvatar(Client.username!);
+                        avatarState.setAvatar(Client.username!, avatar);
                         dispatch(await saveAvatar(avatar));
-                        avatarState.invalidateAndUpdate([Client.username!]);
                     }}
                     mt="5px"
                     mb="5px"