diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 830c1559..349bb8a3 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -156,6 +156,10 @@
position: relative;
width: 100%;
z-index: 2;
+
+ &.Placeholder {
+ opacity: 0;
+ }
}
.icon {
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index fba0d827..d320e60f 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
-import classnames from 'classnames'
+import classNames from 'classnames'
import SearchModal from '~components/SearchModal'
import WeaponModal from '~components/WeaponModal'
@@ -36,7 +36,7 @@ const WeaponUnit = (props: Props) => {
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
- const classes = classnames({
+ const classes = classNames({
WeaponUnit: true,
mainhand: props.unitType == 0,
grid: props.unitType == 1,
@@ -73,6 +73,12 @@ const WeaponUnit = (props: Props) => {
setImageUrl(imgSrc)
}
+ function placeholderImageUrl() {
+ return props.unitType == 0
+ ? '/images/placeholder-main.png'
+ : '/images/placeholder-grid.png'
+ }
+
function awakeningImage() {
if (
props.gridWeapon &&
@@ -366,7 +372,14 @@ const WeaponUnit = (props: Props) => {
{ultimaImages()}
-
+
{props.editable ? (
diff --git a/public/images/placeholder-grid.png b/public/images/placeholder-grid.png
new file mode 100644
index 00000000..d47aea09
Binary files /dev/null and b/public/images/placeholder-grid.png differ
diff --git a/public/images/placeholder-main.png b/public/images/placeholder-main.png
new file mode 100644
index 00000000..8f88e6ec
Binary files /dev/null and b/public/images/placeholder-main.png differ