✨ NEW: lazy loading in list of resto img + loading img

package.json

@@ -14,6 +14,14 @@
  "keywords": [],
  "author": "Tri Rizeki Rifandani",
  "license": "ISC",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/rifandani/menjadi-web-developer-expert.git"
+ },
+ "bugs": {
+ "url": "https://github.com/rifandani/menjadi-web-developer-expert/issues"
+ },
+ "homepage": "https://github.com/rifandani/menjadi-web-developer-expert#readme",
  "devDependencies": {
  "@babel/core": "^7.10.5",
  "@babel/preset-env": "^7.10.4",

sharp.js

@@ -11,33 +11,65 @@ if (!fs.existsSync(destination)) {
 }
 
 fs.readdirSync(target).forEach((image) => {
- // convert image lebar 1200px
- sharp(`${target}/${image}`)
- .resize(1200)
- .toFile(
- path.resolve(
- __dirname,
- `${destination}/${image.split('.').slice(0, -1).join('.')}-1200.jpg`,
- ),
- );
+ if (image.includes('hero')) {
+ // convert hero image lebar 1200px
+ sharp(`${target}/${image}`)
+ .resize(1200)
+ .toFile(
+ path.resolve(
+ __dirname,
+ `${destination}/${image.split('.').slice(0, -1).join('.')}-1200.jpg`,
+ ),
+ );
 
- // convert image lebar 1000px
- sharp(`${target}/${image}`)
- .resize(1000)
- .toFile(
- path.resolve(
- __dirname,
- `${destination}/${image.split('.').slice(0, -1).join('.')}-1000.jpg`,
- ),
- );
+  // convert hero image lebar 1000px
+  sharp(`${target}/${image}`)
+  .resize(1000)
+  .toFile(
+  path.resolve(
+  __dirname,
+  `${destination}/${image.split('.').slice(0, -1).join('.')}-1000.jpg`,
+  ),
+  );
 
- // convert image lebar 600px
- sharp(`${target}/${image}`)
- .resize(600)
- .toFile(
- path.resolve(
- __dirname,
- `${destination}/${image.split('.').slice(0, -1).join('.')}-600.jpg`,
- ),
- );
+ // convert hero image lebar 600px
+ sharp(`${target}/${image}`)
+ .resize(600)
+ .toFile(
+ path.resolve(
+ __dirname,
+ `${destination}/${image.split('.').slice(0, -1).join('.')}-600.jpg`,
+ ),
+ );
+ } else {
+ // convert loading image lebar 400px
+ sharp(`${target}/${image}`)
+ .resize(400)
+ .toFile(
+ path.resolve(
+ __dirname,
+ `${destination}/${image.split('.').slice(0, -1).join('.')}-400.jpg`,
+ ),
+ );
+
+ // convert loading image lebar 300px
+ sharp(`${target}/${image}`)
+ .resize(300)
+ .toFile(
+ path.resolve(
+ __dirname,
+ `${destination}/${image.split('.').slice(0, -1).join('.')}-300.jpg`,
+ ),
+ );
+
+ // convert loading image lebar 200px
+ sharp(`${target}/${image}`)
+ .resize(200)
+ .toFile(
+ path.resolve(
+ __dirname,
+ `${destination}/${image.split('.').slice(0, -1).join('.')}-200.jpg`,
+ ),
+ );
+ }
 });

src/scripts/utils/swal-initiator.js

@@ -1,21 +1,31 @@
-import Swal from 'sweetalert2';
+// implementing code splitting
 
 const initSwalSuccess = (title) => {
- Swal.fire({
- title,
- toast: true,
- icon: 'success',
- confirmButtonText: 'Ok',
- });
+ import('sweetalert2')
+ .then((module) => module.default)
+ .then((swal) => {
+ swal.fire({
+ title,
+ toast: true,
+ icon: 'success',
+ confirmButtonText: 'Ok',
+ });
+ })
+ .catch((err) => console.error(err));
 };
 
 const initSwalError = (title) => {
- Swal.fire({
- title,
- toast: true,
- icon: 'error',
- confirmButtonText: 'Ok',
- });
+ import('sweetalert2')
+ .then((module) => module.default)
+ .then((swal) => {
+ swal.fire({
+ title,
+ toast: true,
+ icon: 'error',
+ confirmButtonText: 'Ok',
+ });
+ })
+ .catch((err) => console.error(err));
 };
 
 export { initSwalSuccess, initSwalError };

src/scripts/views/templates/resto-card.js

@@ -5,9 +5,9 @@ const restoCard = (resto) => `
  <div tabindex="0" class="card">
  <a href="#/resto/${resto.id}" class="card-a-tag">
  <div class="img-container">
- <img tabindex="0" class="card-image lazyload" crossorigin="anonymous" alt="${
+ <img tabindex="0" class="card-image lazyload" crossorigin="anonymous" src="./images/loading-300.jpg" alt="${
  resto.name
- }" src="${CONFIG.BASE_IMAGE_URL + resto.pictureId}" />
+ }" data-src="${CONFIG.BASE_IMAGE_URL + resto.pictureId}" />
  <span tabindex="0" class="card-rating">
  <i title="ratings" class="fa fa-star"></i>
  <span>${resto.rating}</span>

src/scripts/views/templates/resto-detail.js

@@ -5,7 +5,7 @@ const restoDetail = (resto) => `
  <div class="detail">
  <div class="img-container">
  <img class="detail-img" alt="${resto.name}" src="${
- CONFIG.BASE_IMAGE_URL + resto.pictureId
+ CONFIG.BASE_IMAGE_URL_SM + resto.pictureId
 }"/>
  </div>