diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 88d99eb0b..e1256da31 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -991,6 +991,8 @@ "interactions_circle.compose": "Share", "interactions_circle.confirmation_heading": "Do you want to generate an interaction circle for the user @{username}?", "interactions_circle.download": "Download", + "interactions_circle.error.image_loading": "Failed to load one of the avatars", + "interactions_circle.error.image_loading.multiple": "Failed to load some of the avatars", "interactions_circle.start": "Generate", "interactions_circle.state.done": "Finalizing…", "interactions_circle.state.drawing": "Drawing circle", diff --git a/packages/pl-fe/src/pages/fun/circle.tsx b/packages/pl-fe/src/pages/fun/circle.tsx index 516572343..3c20f0006 100644 --- a/packages/pl-fe/src/pages/fun/circle.tsx +++ b/packages/pl-fe/src/pages/fun/circle.tsx @@ -18,6 +18,7 @@ import Text from 'pl-fe/components/ui/text'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { useModalsStore } from 'pl-fe/stores/modals'; +import toast from 'pl-fe/toast'; const toRad = (x: number) => x * (Math.PI / 180); @@ -34,6 +35,8 @@ const messages = defineMessages({ fetchingAvatars: { id: 'interactions_circle.state.fetching_avatars', defaultMessage: 'Fetching avatars' }, drawing: { id: 'interactions_circle.state.drawing', defaultMessage: 'Drawing circle' }, done: { id: 'interactions_circle.state.done', defaultMessage: 'Finalizing…' }, + imageLoadingError: { id: 'interactions_circle.error.image_loading', defaultMessage: 'Failed to load one of the avatars' }, + imageLoadingMultipleError: { id: 'interactions_circle.error.image_loading.multiple', defaultMessage: 'Failed to load some of the avatars' }, }); const CirclePage: React.FC = () => { @@ -90,6 +93,8 @@ const CirclePage: React.FC = () => { const ownAvatar = account?.avatar || avatarMissing; + let imageLoadingErorrs = 0; + for (const layer of [ { index: 0, off: 0, distance: 0, count: 1, radius: 110, users: [{ avatar: ownAvatar }] }, { index: 1, off: 1, distance: 200, count: 8, radius: 64, users: users.slice(0, 8) }, @@ -115,6 +120,7 @@ const CirclePage: React.FC = () => { const avatarUrl = users[i].avatar || avatarMissing; try { + // eslint-disable-next-line no-loop-func await new Promise(resolve => { const img = new Image(); @@ -131,6 +137,11 @@ const CirclePage: React.FC = () => { resolve(null); }; + img.onerror = () => { + imageLoadingErorrs++; + resolve(null); + }; + img.setAttribute('crossorigin', 'anonymous'); img.src = avatarUrl; }); @@ -140,6 +151,10 @@ const CirclePage: React.FC = () => { } } + if (imageLoadingErorrs) { + toast.info(imageLoadingErorrs > 1 ? messages.imageLoadingMultipleError : messages.imageLoadingError); + } + setProgress({ state: 'done', progress: 100 }); }).catch(() => {}); };