Upgrade react-photo-album and change code to support v3

[rcantin-w]

What does this change?

As per #11294

Moving to v3 broke a few things https://github.com/igordanchenko/react-photo-album/releases/tag/v3.0.0 so I aimed to figure out how to not change anything UI facing whilst going with what is now offered by the library.

How to test

• Run locally
• go to http://localhost:3000/search/images and http://localhost:3000/concepts/fmydsuw2, do they look the same as in prod? On all screen sizes?
• Try to resize, does it looks good?

How can we measure success?

Up to date packages and seemingly lighter version of it.

Have we considered potential risks?

If well tested, low risk

[github-actions]

Size Change: -1.56 kB (-0.16%)

Total Size: 969 kB

Filename	Size	Change
content/webapp/.next/static/chunks/5006-7ae136dadb5798c4.js	0 B	-7.15 kB (removed)	🏆
content/webapp/.next/static/chunks/7414-03438ef5466cad65.js	0 B	-6 kB (removed)	🏆
content/webapp/.next/static/chunks/pages/concepts/[conceptId]-c30837b69e303d3d.js	0 B	-4.38 kB (removed)	🏆
content/webapp/.next/static/chunks/pages/search-f05a4c5ff334a3f2.js	0 B	-5.32 kB (removed)	🏆
content/webapp/.next/static/chunks/pages/search/images-e81eab35d92f9150.js	0 B	-2.14 kB (removed)	🏆
content/webapp/.next/static/chunks/webpack-a2131292b969a674.js	0 B	-2.34 kB (removed)	🏆
content/webapp/.next/static/chunks/3745-308f1467ce68d902.js	4.41 kB	+4.41 kB (new file)	🆕
content/webapp/.next/static/chunks/5006-317fc97ac03c5e22.js	7.15 kB	+7.15 kB (new file)	🆕
content/webapp/.next/static/chunks/pages/concepts/[conceptId]-d293535d96059080.js	4.37 kB	+4.37 kB (new file)	🆕
content/webapp/.next/static/chunks/pages/search-820d5719099707bf.js	5.32 kB	+5.32 kB (new file)	🆕
content/webapp/.next/static/chunks/pages/search/images-4617a6ae894f3edc.js	2.14 kB	+2.14 kB (new file)	🆕
content/webapp/.next/static/chunks/webpack-08be8028875c0650.js	2.37 kB	+2.37 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
content/webapp/.next/static/chunks/00a8a139.976ae5fd9989bf10.js	59 kB
content/webapp/.next/static/chunks/1002-7318e6a4085ebb66.js	4.3 kB
content/webapp/.next/static/chunks/132.1d7e9ae9baf2bf3e.js	4.82 kB
content/webapp/.next/static/chunks/1349.d2a91366cd45a4ca.js	1.13 kB
content/webapp/.next/static/chunks/1624.078f48c0e02f531b.js	269 B
content/webapp/.next/static/chunks/1747-5fd40caeb12f236d.js	6.96 kB
content/webapp/.next/static/chunks/2223.13e51946be4f0995.js	1.8 kB
content/webapp/.next/static/chunks/2224.bc68143081ea6316.js	1.36 kB
content/webapp/.next/static/chunks/2545.c2b990ec5d9479b8.js	1.36 kB
content/webapp/.next/static/chunks/2568.b1076f5e01039efd.js	802 B
content/webapp/.next/static/chunks/2630-4bf3a02ad19c8ede.js	4.46 kB
content/webapp/.next/static/chunks/267-d39fe4d3f0f27696.js	3.67 kB
content/webapp/.next/static/chunks/286.b066630328a98bd8.js	20.8 kB
content/webapp/.next/static/chunks/3.118acbbc2ae9c2bd.js	711 B
content/webapp/.next/static/chunks/3199.4ed9de84fa34a4be.js	439 B
content/webapp/.next/static/chunks/3419.35e7d06626e8c6d0.js	420 B
content/webapp/.next/static/chunks/3420-7e0cf6c9a569a227.js	3.87 kB
content/webapp/.next/static/chunks/3471-36aed1d4030cea1e.js	2.75 kB
content/webapp/.next/static/chunks/3627.3684abdbe8510420.js	1.77 kB
content/webapp/.next/static/chunks/382-ca57e688a4545109.js	3.07 kB
content/webapp/.next/static/chunks/4468.bdc27fdcaba7eeb6.js	6.42 kB
content/webapp/.next/static/chunks/4537-b7cd791d2e914e47.js	4.22 kB
content/webapp/.next/static/chunks/4825-4df3e43759acfe8c.js	7.76 kB
content/webapp/.next/static/chunks/4962-1a876f84ea228198.js	12.3 kB
content/webapp/.next/static/chunks/5048.c1216d2909771efa.js	2.87 kB
content/webapp/.next/static/chunks/5286-bee6f4dcdeeae555.js	3.27 kB
content/webapp/.next/static/chunks/5292-b399898dfbbd0ba7.js	2.83 kB
content/webapp/.next/static/chunks/5389.d762d43fb2d0a421.js	1.7 kB
content/webapp/.next/static/chunks/5637-f317fdb347ed9c6a.js	20.9 kB
content/webapp/.next/static/chunks/5768-699dd21166035c67.js	3.18 kB
content/webapp/.next/static/chunks/5843-e7a3b6f6cdcea870.js	3.09 kB
content/webapp/.next/static/chunks/6207.faaccc5f80a44f7a.js	268 B
content/webapp/.next/static/chunks/6318.9b79dafa4a83ab14.js	2.29 kB
content/webapp/.next/static/chunks/6501.a4bbcf1ca03737bf.js	1.3 kB
content/webapp/.next/static/chunks/6577-effbaab7dae5448b.js	3.52 kB
content/webapp/.next/static/chunks/6862-7cf8b92070da46f4.js	4.43 kB
content/webapp/.next/static/chunks/6879.76da889a24c486ba.js	2.6 kB
content/webapp/.next/static/chunks/7044-3a1f3407e511ecdc.js	5.48 kB
content/webapp/.next/static/chunks/7107-eecda3d84c2ca297.js	34.1 kB
content/webapp/.next/static/chunks/722-f8a675b537266d7d.js	3.2 kB
content/webapp/.next/static/chunks/7440.919417010418505e.js	2.85 kB
content/webapp/.next/static/chunks/7603-1256b678076a1b0c.js	3.27 kB
content/webapp/.next/static/chunks/7888.f28493fb337edae5.js	5.3 kB
content/webapp/.next/static/chunks/8189-461a5e1315036809.js	3.45 kB
content/webapp/.next/static/chunks/8348.7aa3dc55a5cec72b.js	1.26 kB
content/webapp/.next/static/chunks/9042-da245b7540a5c643.js	5.21 kB
content/webapp/.next/static/chunks/9049-a63f6fa100834eba.js	3.63 kB
content/webapp/.next/static/chunks/908.c3283f73c6e55bbf.js	1.79 kB
content/webapp/.next/static/chunks/9519-a1745f17911758ee.js	6.16 kB
content/webapp/.next/static/chunks/9590.2d7b95171d8d0866.js	579 B
content/webapp/.next/static/chunks/9680-68fd13189afcdb6c.js	3.07 kB
content/webapp/.next/static/chunks/9778-7a9dca488eda648b.js	3.06 kB
content/webapp/.next/static/chunks/9950.02e3834265565be8.js	1.13 kB
content/webapp/.next/static/chunks/framework-cd51c6317946e9aa.js	45.2 kB
content/webapp/.next/static/chunks/main-978dba4ddde48128.js	30.7 kB
content/webapp/.next/static/chunks/pages/_app-ade41e8f5d261c28.js	111 kB
content/webapp/.next/static/chunks/pages/_error-4ae94352bfd58ed4.js	335 B
content/webapp/.next/static/chunks/pages/404-9b6af81752f83cf9.js	263 B
content/webapp/.next/static/chunks/pages/500-7bf98e2f0d70a0db.js	262 B
content/webapp/.next/static/chunks/pages/articles-c733c3a3a001cddf.js	2.94 kB
content/webapp/.next/static/chunks/pages/articles/[articleId]-04d54e858d8cb216.js	6.78 kB
content/webapp/.next/static/chunks/pages/books-7e54c2ecdf8262a9.js	2.97 kB
content/webapp/.next/static/chunks/pages/books/[bookId]-077d421bd1e84d05.js	4.2 kB
content/webapp/.next/static/chunks/pages/collections-714f2d4a99baf744.js	2.06 kB
content/webapp/.next/static/chunks/pages/cookie-policy-d38036ca95595d73.js	6.3 kB
content/webapp/.next/static/chunks/pages/event-series/[eventSeriesId]-10f4eff99691fdee.js	3.29 kB
content/webapp/.next/static/chunks/pages/events-312d32ae87d73ba1.js	3.07 kB
content/webapp/.next/static/chunks/pages/events/[eventId]-06da1af3e8113b77.js	9.11 kB
content/webapp/.next/static/chunks/pages/events/[eventId]/visual-stories-e361b663cc5ee385.js	304 B
content/webapp/.next/static/chunks/pages/exhibitions-aa8e051201efcff6.js	3.32 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]-67e682d6519940bb.js	4.37 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]/visual-stories-b0cfcf472928d278.js	304 B
content/webapp/.next/static/chunks/pages/guides/[guideId]-f15d8bf0f0b30f6f.js	2.29 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions-cc37bb895fb8374c.js	3.55 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]-2bc5e43bc28391a6.js	3.88 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]-a58a5e8e0bbadb7f.js	7.64 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]/[stop]-3bb43eba94b3c4a5.js	4.26 kB
content/webapp/.next/static/chunks/pages/index-f6c063ca853878cd.js	1.99 kB
content/webapp/.next/static/chunks/pages/newsletter-4ed6a4a888a857f4.js	2.38 kB
content/webapp/.next/static/chunks/pages/pages/[pageId]-02780a97a3f7acb0.js	1.94 kB
content/webapp/.next/static/chunks/pages/projects/[projectId]-7acc29f96e1d673f.js	2.27 kB
content/webapp/.next/static/chunks/pages/search/events-9e72f32fe546a220.js	1.5 kB
content/webapp/.next/static/chunks/pages/search/stories-81fbe2face9aed8d.js	3.25 kB
content/webapp/.next/static/chunks/pages/search/works-f295e6170487a32c.js	4.39 kB
content/webapp/.next/static/chunks/pages/seasons/[seasonId]-005659ad17a2f569.js	3.94 kB
content/webapp/.next/static/chunks/pages/series/[seriesId]-58f8f6c9d908435d.js	5.55 kB
content/webapp/.next/static/chunks/pages/slice-simulator-29a0ef9211652363.js	8.48 kB
content/webapp/.next/static/chunks/pages/stories-dbe148fb769a5f00.js	3.62 kB
content/webapp/.next/static/chunks/pages/stories/[contentType]-a81d27a39789f841.js	2.99 kB
content/webapp/.next/static/chunks/pages/visit-us-ffb0bbde0fb39fdb.js	2.45 kB
content/webapp/.next/static/chunks/pages/visual-stories/[visualStoryId]-13d261b44455da8c.js	242 B
content/webapp/.next/static/chunks/pages/whats-on-425c28a6ef16454b.js	220 B
content/webapp/.next/static/chunks/pages/whats-on/[period]-52becb68c10c131c.js	288 B
content/webapp/.next/static/chunks/pages/works/[workId]-7b206cc445dbc68a.js	22.2 kB
content/webapp/.next/static/chunks/pages/works/[workId]/download-a7be63619af60708.js	3.06 kB
content/webapp/.next/static/chunks/pages/works/[workId]/images-c61f2210fc91fbfd.js	680 B
content/webapp/.next/static/chunks/pages/works/[workId]/items-012550f624ac99f2.js	216 B
content/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js	31.1 kB
identity/webapp/.next/static/chunks/286.b94e91b70e38ea49.js	20.7 kB
identity/webapp/.next/static/chunks/374.94537fd117195c86.js	2.47 kB
identity/webapp/.next/static/chunks/432.fa29da5acdb8e0b1.js	744 B
identity/webapp/.next/static/chunks/442-f1af16c3993c320a.js	8.96 kB
identity/webapp/.next/static/chunks/644-2ca73088ad8338ab.js	16.4 kB
identity/webapp/.next/static/chunks/framework-b330de622121c9cc.js	45.2 kB
identity/webapp/.next/static/chunks/main-d973a3979032d64a.js	32.2 kB
identity/webapp/.next/static/chunks/pages/_app-c100655d9712a4ba.js	104 kB
identity/webapp/.next/static/chunks/pages/_error-8e82953fa241027d.js	1.42 kB
identity/webapp/.next/static/chunks/pages/delete-requested-172ecc81cb6f0fa0.js	3.22 kB
identity/webapp/.next/static/chunks/pages/error-2784191c63901541.js	1.7 kB
identity/webapp/.next/static/chunks/pages/index-44b48653e661ac63.js	11.9 kB
identity/webapp/.next/static/chunks/pages/registration-518df86b53b49f22.js	4.12 kB
identity/webapp/.next/static/chunks/pages/success-bb0753aae1b76578.js	3.29 kB
identity/webapp/.next/static/chunks/pages/validated-6306e8aad1aae32a.js	3.37 kB
identity/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js	31.1 kB
identity/webapp/.next/static/chunks/webpack-d9d97d637ba6ec7a.js	1.82 kB

_{compressed-size-action}

[rcantin-w]

Tests seem to fail because the provided stylesheet can't be loaded properly.

1. why
2. why does it make pages that don't use that component fail as well?

[rcantin-w]

I'm not sure I'm a fan of the stylesheet, especially as it seems to load on every page. Tempted to stay on v2 of the package, or maybe download the stylesheet and re-add it as styles of our own?

[rcantin-w]

Ticket created to explore other avenues. In the meantime, we'll stick to v2 as discussed.