Add placeholder to images from SesyonDialog

components/jwenn-sesyon/sesyon-dialog.js

@@ -15,6 +15,10 @@ import AppleIcon from '@material-ui/icons/Apple'
 import GetAppIcon from '@material-ui/icons/GetApp'
 import {Windows, Linux} from '@icons-pack/react-simple-icons'
 
+import sessionMobile from '../../public/session-mobile-914x1024.png'
+import sessionDesktop from '../../public/session-desktop-1024x549.png'
+import QRCode from '../../public/sesyon-qr-code.png'
+
 const sessionUrl = process.env.NEXT_PUBLIC_SESSION_URL || 'http://sesyon.o-k-i.net'
 
 function Alert(props) {
@@ -110,17 +114,19 @@ export default function SesyonDialog({ouve, handleFemen}) {
             <Box style={{display: 'flex', justifyContent: 'space-around'}}>
               <Box>
                 <Image
-                  src='/session-mobile-914x1024.png'
+                  src={sessionMobile}
                   width={228}
                   height={256}
+                  placeholder='blur'
                 />
               </Box>
               <Divider flexItem orientation='vertical' />
               <Box style={{alignSelf: 'center'}}>
                 <Image
-                  src='/session-desktop-1024x549.png'
+                  src={sessionDesktop}
                   width={256}
                   height={137}
+                  placeholder='blur'
                 />
               </Box>
             </Box>
@@ -167,9 +173,10 @@ export default function SesyonDialog({ouve, handleFemen}) {
           </Typography>
           <Box style={{textAlign: 'center'}}>
             <Image
-              src='/sesyon-qr-code.png'
+              src={QRCode}
               width={200}
               height={200}
+              placeholder='blur'
             />
           </Box>
           <Box style={{textAlign: 'center', marginBlock: 20}}>