feat(img): add placeholder while images are loading (#624)

## Summary by CodeRabbit - **New Features** - Added placeholder images to various components for improved loading visuals using an SVG spinner. - **Tests** - Updated test assertions for the `NavBar` component to access the `src` attribute using the `props` method instead of the `attributes` method.
antoinezanardi · Jul 9, 2024 · 4d7419a · 4d7419a
1 parent 49cf119
commit 4d7419a
Show file tree

Hide file tree

Showing 45 changed files with 42,096 additions and 41,950 deletions.
diff --git a/app/components/layouts/default/NavBar/NavBar.vue b/app/components/layouts/default/NavBar/NavBar.vue
@@ -14,6 +14,7 @@
       <NuxtImg
         id="navbar-werewolves-assistant-logo"
         :alt="$t('components.NavBar.werewolvesAssistantLogo')"
+        placeholder="/svg/misc/infinite-spinner.svg"
         src="/img/logo/square/werewolves-logo-small.png"
       />
 

diff --git a/...rtGameConfirmDialogPlayersPositioned/GameLobbyStartGameConfirmDialogPlayersPositioned.vue b/...rtGameConfirmDialogPlayersPositioned/GameLobbyStartGameConfirmDialogPlayersPositioned.vue
@@ -6,6 +6,7 @@
     <NuxtImg
       :alt="$t(`components.GameLobbyStartGameConfirmDialogPlayersPositioned.playersPosition`)"
       :height="svgSize"
+      placeholder="/svg/misc/infinite-spinner.svg"
       src="/svg/misc/pie-chart-clock-wise.svg"
       :width="svgSize"
     />

diff --git a/...meLobbyStartGameConfirmDialogPlayersReady/GameLobbyStartGameConfirmDialogPlayersReady.vue b/...meLobbyStartGameConfirmDialogPlayersReady/GameLobbyStartGameConfirmDialogPlayersReady.vue
@@ -7,13 +7,15 @@
       <NuxtImg
         :alt="$t(`shared.game.player.group.name.villagers`)"
         :height="svgSize"
+        placeholder="/svg/misc/infinite-spinner.svg"
         src="/svg/role/villager.svg"
         :width="svgSize"
       />
 
       <NuxtImg
         :alt="$t(`shared.game.player.group.name.werewolves`)"
         :height="svgSize"
+        placeholder="/svg/misc/infinite-spinner.svg"
         src="/svg/role/werewolf.svg"
         :width="svgSize"
       />

diff --git a/...ionsHubRolesTab/GameLobbyOptionsHubRolesTabSheriff/GameLobbyOptionsHubRolesTabSheriff.vue b/...ionsHubRolesTab/GameLobbyOptionsHubRolesTabSheriff/GameLobbyOptionsHubRolesTabSheriff.vue
@@ -10,6 +10,7 @@
           class="duration-300 ease-in-out transition-all"
           :class="{ 'grayscale': !isSheriffEnabledValue }"
           height="50px"
+          placeholder="/svg/misc/infinite-spinner.svg"
           src="/svg/game/player/player-attribute/sheriff.svg"
           width="50px"
         />

diff --git a/.../game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubTabView.vue b/.../game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubTabView.vue
@@ -38,6 +38,7 @@
           <NuxtImg
             :alt="$t('components.GameLobbyOptionsHubTabView.compositionTabImageAlt')"
             height="40"
+            placeholder="/svg/misc/infinite-spinner.svg"
             src="/svg/misc/people.svg"
             width="40"
           />
@@ -63,6 +64,7 @@
           <NuxtImg
             :alt="$t('components.GameLobbyOptionsHubTabView.votesTabImageAlt')"
             height="40"
+            placeholder="/svg/misc/infinite-spinner.svg"
             src="/svg/game/game-play/game-play-action/settle-votes.svg"
             width="40"
           />

diff --git a/...Records/GameOverHistoryRecord/GameOverHistoryRecordAction/GameOverHistoryRecordAction.vue b/...Records/GameOverHistoryRecord/GameOverHistoryRecordAction/GameOverHistoryRecordAction.vue
@@ -10,6 +10,7 @@
     <NuxtImg
       :alt="$t('components.GameOverHistoryRecordAction.actionIconAltText')"
       height="25"
+      placeholder="/svg/misc/infinite-spinner.svg"
       :src="gameHistoryRecordActionTextIcon"
       width="25"
     />

diff --git a/...s/GameOverHistoryRecordDecisionBuriedPlayer/GameOverHistoryRecordDecisionBuriedPlayer.vue b/...s/GameOverHistoryRecordDecisionBuriedPlayer/GameOverHistoryRecordDecisionBuriedPlayer.vue
@@ -16,6 +16,7 @@
         id="devoted-servant-stolen-role-tag-icon"
         :alt="$t('components.GameOverHistoryRecordDecisionBuriedPlayer.stolenRoleByDevotedServantIcon')"
         height="25"
+        placeholder="/svg/misc/infinite-spinner.svg"
         src="/svg/game/player/player-attribute/stolen-role.svg"
         width="25"
       />

diff --git a/...ision/GameOverHistoryRecordDecisionChosenSide/GameOverHistoryRecordDecisionChosenSide.vue b/...ision/GameOverHistoryRecordDecisionChosenSide/GameOverHistoryRecordDecisionChosenSide.vue
@@ -10,6 +10,7 @@
     <NuxtImg
       :alt="$t(`components.GameTeamSide.sideAltText.${props.gameHistoryRecord.play.chosenSide}`)"
       height="75"
+      placeholder="/svg/misc/infinite-spinner.svg"
       :src="chosenSideSvgIconPath"
       width="75"
     />

diff --git a/...cisionTargets/GameOverHistoryRecordDecisionTarget/GameOverHistoryRecordDecisionTarget.vue b/...cisionTargets/GameOverHistoryRecordDecisionTarget/GameOverHistoryRecordDecisionTarget.vue
@@ -15,6 +15,7 @@
       <NuxtImg
         :alt="tagText"
         height="25"
+        placeholder="/svg/misc/infinite-spinner.svg"
         :src="tagIconPath"
         width="25"
       />

diff --git a/...verHistory/GameOverHistoryRecords/GameOverHistoryRecordIcon/GameOverHistoryRecordIcon.vue b/...verHistory/GameOverHistoryRecords/GameOverHistoryRecordIcon/GameOverHistoryRecordIcon.vue
@@ -5,6 +5,7 @@
   >
     <NuxtImg
       :alt="$t(`components.GameOverHistoryRecordIcon.gameHistoryRecordIconAltText`)"
+      placeholder="/svg/misc/infinite-spinner.svg"
       :src="gameHistoryRecordIconPath"
     />
   </div>

diff --git a/app/components/pages/game/GameOver/GameOverVictoryText/GameOverVictoryText.vue b/app/components/pages/game/GameOver/GameOverVictoryText/GameOverVictoryText.vue
@@ -7,13 +7,15 @@
       <NuxtImg
         :alt="$t('components.GameOverVictoryText.trophyImageAlt')"
         height="125"
+        placeholder="/svg/misc/infinite-spinner.svg"
         src="svg/misc/trophy.svg"
         width="125"
       />
 
       <NuxtImg
         :alt="$t('components.GameOverVictoryText.victoryTypeImageAlt')"
         height="125"
+        placeholder="/svg/misc/infinite-spinner.svg"
         :src="victoryTypeTextsAndSvg.svgPath"
         width="125"
       />

diff --git a/...ygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue b/...ygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue
@@ -21,6 +21,7 @@
           <NuxtImg
             :alt="$t('components.WitchUsePotionsTabView.lifePotionImageAlt')"
             height="40"
+            placeholder="/svg/misc/infinite-spinner.svg"
             src="svg/game/player/player-attribute/drank-life-potion.svg"
             width="40"
           />
@@ -57,6 +58,7 @@
           <NuxtImg
             :alt="$t('components.WitchUsePotionsTabView.deathPotionImageAlt')"
             height="40"
+            placeholder="/svg/misc/infinite-spinner.svg"
             src="svg/game/player/player-attribute/drank-death-potion.svg"
             width="40"
           />

diff --git a/.../GamePlaygroundHeader/GamePlaygroundHeaderCurrentPlay/GamePlaygroundHeaderCurrentPlay.vue b/.../GamePlaygroundHeader/GamePlaygroundHeaderCurrentPlay/GamePlaygroundHeaderCurrentPlay.vue
@@ -9,6 +9,7 @@
         :alt="$t(`components.GamePlaygroundHeaderCurrentPlay.currentPlayAltText`)"
         class="me-3"
         height="50"
+        placeholder="/svg/misc/infinite-spinner.svg"
         :src="currentPlaySvgAndTextKey.svgPath"
         width="50"
       />

diff --git a/app/components/pages/game/GamePlaying/GameTeamSide/GameTeamSide.vue b/app/components/pages/game/GamePlaying/GameTeamSide/GameTeamSide.vue
@@ -7,6 +7,7 @@
       <NuxtImg
         :alt="$t(`components.GameTeamSide.sideAltText.${props.side}`)"
         height="50"
+        placeholder="/svg/misc/infinite-spinner.svg"
         :src="sideSvgIconPath"
         width="50"
       />

diff --git a/...meTeamSide/GameTeamSidePlayer/GameTeamSidePlayerAttribute/GameTeamSidePlayerAttribute.vue b/...meTeamSide/GameTeamSidePlayer/GameTeamSidePlayerAttribute/GameTeamSidePlayerAttribute.vue
@@ -5,6 +5,7 @@
       v-p-tooltip:[{position:tooltipPosition}]="playerAttributeTooltipOptions"
       :alt="playerAttributeDescription"
       height="50"
+      placeholder="/svg/misc/infinite-spinner.svg"
       :src="playerAttributeSvgPath"
       width="50"
     />

diff --git a/...Playing/GameTeamSide/GameTeamSidePlayer/GameTeamSidePlayerName/GameTeamSidePlayerName.vue b/...Playing/GameTeamSide/GameTeamSidePlayer/GameTeamSidePlayerName/GameTeamSidePlayerName.vue
@@ -6,6 +6,7 @@
       :alt="$t('components.GameTeamSidePlayerName.thisPlayerIsDead')"
       class="me-2"
       height="20"
+      placeholder="/svg/misc/infinite-spinner.svg"
       src="/svg/game/player/dead.svg"
       width="20"
     />

diff --git a/...GameTeamSide/GameTeamSidePlayer/GameTeamSidePlayerRoleName/GameTeamSidePlayerRoleName.vue b/...GameTeamSide/GameTeamSidePlayer/GameTeamSidePlayerRoleName/GameTeamSidePlayerRoleName.vue
@@ -8,6 +8,7 @@
       v-p-tooltip="$t('components.GameTeamSidePlayerRoleName.thisPlayerRoleIsRevealed')"
       :alt="$t('components.GameTeamSidePlayerRoleName.thisPlayerRoleIsRevealed')"
       height="20"
+      placeholder="/svg/misc/infinite-spinner.svg"
       src="svg/game/player/player-attribute/seen.svg"
       width="20"
     />

diff --git a/...ed/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/RoleFlippingImageSvgIcon.vue b/...ed/role/RoleImage/RoleFlippingImage/RoleFlippingImageSvgIcon/RoleFlippingImageSvgIcon.vue
@@ -4,6 +4,7 @@
     :alt="$t('components.RoleFlippingImageSvgIcon.iconAlt')"
     class="absolute animate__bounceIn bottom-4 right-2"
     :height="svgSize"
+    placeholder="/svg/misc/infinite-spinner.svg"
     :src="svgIconPath"
     :width="svgSize"
   />

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -4,6 +4,8 @@
       <div class="flex justify-center w-full">
         <NuxtImg
           :alt="$t('pages.index.werewolvesAssistantLogo')"
+          placeholder="/svg/misc/infinite-spinner.svg"
+          placeholder-class="w-24 h-24"
           sizes="sm:125 md:200 lg:200"
           src="/img/logo/square/werewolves-logo.png"
         />