[native] cache LoadableImage in memory and disk
ClosedPublic
Actions

Authored by varun on Sat, Mar 15, 11:16 AM.

Details

Reviewers

bartek
ashoat
angelika

Commits

rCOMM0f2665625267: [native] cache LoadableImage in memory and disk

Summary

The disk lookup for avatars with remote URLs causes a flicker. We can cache in memory as well to remove this flicker. We keep the disk cache as a fallback (e.g. for offline mode).

From the expo docs:

Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions.

It seems safe to cache in memory, and I feel like we've seen this flicker elsewhere (maybe encrypted images?), so I've changed the cache policy for all LoadableImages, but can narrow the scope to just Avatars if desired.

Test Plan

Confirmed on simulator and physical device that flicker doesn't occur

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

varun created this revision.Sat, Mar 15, 11:16 AM

Herald added a subscriber: tomek. · View Herald TranscriptSat, Mar 15, 11:16 AM

ashoat published this revision for review.Sat, Mar 15, 11:26 AM

ashoat accepted this revision.

ashoat added inline comments.

native/media/loadable-image.react.js
21 ↗	(On Diff #47406)	Accidental or was this Prettier?

This revision is now accepted and ready to land.Sat, Mar 15, 11:26 AM

Harbormaster failed remote builds in B33718: Diff 47406!Sat, Mar 15, 11:27 AM

varun added inline comments.Sat, Mar 15, 11:28 AM

native/media/loadable-image.react.js
21 ↗	(On Diff #47406)	accidental.. will undo

Emscripten failure is weird, not sure why that's happening, but definitely unrelated to this diff (perhaps the issue is live on master). Created ENG-10380 to investigate

This revision was landed with ongoing or failed builds.Sat, Mar 15, 2:15 PM

Closed by commit rCOMM0f2665625267: [native] cache LoadableImage in memory and disk (authored by varun). · Explain Why

This revision was automatically updated to reflect the committed changes.

varun added a commit: rCOMM0f2665625267: [native] cache LoadableImage in memory and disk.

Revision Contents
Changeset List

Path

Size

native/

media/

loadable-image.react.js

1 line

Diff 47407

View Options

native/media/loadable-image.react.js

Show First 20 Lines • Show All 113 Lines • ▼ Show 20 Lines	() =>
tab: 'chat',		tab: 'chat',
};		};

dispatch({ type: updateNavInfoActionType, payload });		dispatch({ type: updateNavInfoActionType, payload });
},		},
),		),
[dispatch],		[dispatch],
);		);

		// Handle invalid device token
		const localToken = useSelector(
		state => state.tunnelbrokerDeviceToken.localToken,
		);
		const prevLocalToken = React.useRef(localToken);
		React.useEffect(() => {
		if (prevLocalToken.current && !localToken) {
		electron?.fetchDeviceToken?.();
		}

		prevLocalToken.current = localToken;
		}, [localToken]);
}		}

function useCreatePushSubscription(): () => Promise<void> {		function useCreatePushSubscription(): () => Promise<void> {
const publicKey = useSelector(state => state.pushApiPublicKey);		const publicKey = useSelector(state => state.pushApiPublicKey);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callSetDeviceToken = useSetDeviceTokenFanout();		const callSetDeviceToken = useSetDeviceTokenFanout();
const staffCanSee = useStaffCanSee();		const staffCanSee = useStaffCanSee();
▲ Show 20 Lines • Show All 136 Lines • ▼ Show 20 Lines	const callback = (event: MessageEvent) => {
}		}
};		};

navigator.serviceWorker.addEventListener('message', callback);		navigator.serviceWorker.addEventListener('message', callback);
return () =>		return () =>
navigator.serviceWorker?.removeEventListener('message', callback);		navigator.serviceWorker?.removeEventListener('message', callback);
}, [dispatch, supported]);		}, [dispatch, supported]);

		// Handle invalid device token
		const localToken = useSelector(
		state => state.tunnelbrokerDeviceToken.localToken,
		);
		const prevLocalToken = React.useRef(localToken);
		React.useEffect(() => {
		if (
		!navigator.serviceWorker \|\|
		!supported \|\|
		Notification.permission !== 'granted'
		) {
		return;
		}

		if (prevLocalToken.current && !localToken) {
		void createPushSubscription();
		}

		prevLocalToken.current = localToken;
		}, [createPushSubscription, localToken, supported]);

return null;		return null;
}		}

export { PushNotificationsHandler, useCreatePushSubscription };		export { PushNotificationsHandler, useCreatePushSubscription };

[native] cache LoadableImage in memory and diskClosedPublicActions