feat(party): preload images (#18)

* feat(party): prepare branch

* preload next image in sequence

Author: tom-schoener

frontend/src/party/view/ViewParty.tsx

@@ -20,6 +20,7 @@ import ViewPartyStartPage from './ViewPartyStartPage';
 import ViewPartyReveal from './ViewPartyReveal';
 import EmojiBar from '../../components/EmojiBar';
 import ReactionPicker from '../../components/ReactionPicker';
+import { usePreloadNextImage } from './util';
 
 const ViewPartyContent = ({
   partyStatus,
@@ -45,6 +46,7 @@ const ViewPartyContent = ({
     },
     [mutateReactionAsync, partyId, session]
   );
+  usePreloadNextImage(party, partyStatus);
 
   if (!partyStatus || !party) {
     return <div>Unknown party or party status</div>;

frontend/src/party/view/util.ts

@@ -1,4 +1,6 @@
-import { PartyStatusResponse, PartySubmissionResponse, Vote } from '../../api/api-models';
+import { useEffect } from 'react';
+import { getImageUrl } from '../../api/api';
+import { PartyResponse, PartyStatusResponse, PartySubmissionResponse, Vote } from '../../api/api-models';
 
 export const totalRating = (votes: Vote[]) => votes.reduce((x1, x2) => x1 + x2.rating, 0);
 
@@ -29,3 +31,22 @@ export const getSubmissionVotes = (
 ) => {
   return partyStatus.votes.filter((vote) => vote.submissionId === submission.id && (!userId || vote.userId === userId));
 };
+
+const preloadImage = (imageURL: string) => {
+  new Image().src = imageURL;
+};
+
+export const usePreloadNextImage = (party: PartyResponse, partyStatus: PartyStatusResponse) => {
+  const currentIndex = partyStatus.current ? partyStatus.sequence[partyStatus.current.index] : -1;
+  const nextIndex = Math.min(currentIndex + 1, party.submissions.length - 1);
+  const nextIndexInSequence = partyStatus.sequence?.[nextIndex];
+  const nextSubmissionImageId = party.submissions?.[nextIndexInSequence]?.imageId;
+
+  useEffect(() => {
+    if (!nextSubmissionImageId) {
+      return;
+    }
+    const nextImageURL = getImageUrl(nextSubmissionImageId);
+    preloadImage(nextImageURL);
+  }, [nextSubmissionImageId]);
+};

frontend/src/version.ts

@@ -9,6 +9,10 @@ interface Change {
 }
 
 export const CHANGES: Change[] = [
+  {
+    name: '0.10.0',
+    changes: [{ description: 'Preload images', type: 'feature' }],
+  },
   {
     name: '0.9.1',
     changes: [{ description: 'Prevent Emoji Picker from loosing focus on state change', type: 'fix' }],