From 2a1cf5ae8f6614b063b7b87585b7a7089ff67754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 8 Dec 2020 12:40:16 +0100
Subject: [PATCH] Add component's lazy loading

---
 README.md                                     | 49 ++++++++++---------
 src/App.vue                                   |  3 +-
 .../Form/ImageUnsplash/ImageUnsplash.vue      |  3 +-
 src/components/Grid/Grid.vue                  |  3 +-
 src/components/Grid/GridItem.vue              |  3 +-
 src/views/Fruit.vue                           |  3 +-
 src/views/Fruits.vue                          |  3 +-
 7 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 5980bdc..0008996 100644
--- a/README.md
+++ b/README.md
@@ -14,33 +14,34 @@ You've been given the task of creating a simple application with create/read/del
 - [x] Create a branch off of master, commit all your work to this new branch.
 - [ ] When you are finished, open a PR to master (but do not merge it). In the PR description, copy, paste and answer the following:
 
-```
-    ### Your name
-    
-      Noé Viricel
+---
+### Your name
+Noé Viricel
 
-    ### What was challenging?
+### What was challenging?
+Cypress.io
 
-      Cypress.io
+### What did you enjoy doing?
+...
 
-    ### What did you enjoy doing?
+### If you had more time, what would you improve/do differently?
+  #### Components Lazy-Loading
+  *(Prefetching auto-handled since Vue CLI 3+)*
+  - [x] Dynamic imports (works for most browsers).
+  - [ ] Improve browser support by using Async components, it would offer more control over Component's loading / error states.
+      
 
-
-
-    ### If you had more time, what would you improve/do differently?
-
-      - Use AntD (or any CSS Framework)
-      - CSS Module
-      - Form Validations
-      - Page Transitions
-      - Loading State
-      - Setup environment variables
-      - Setup API proxy with Axios
-      - More Accessibility
-      - Component Lazy Loading
-      - Image Caching & Lazy Loading
-      - Inject axios globally as $http
-      - More test
+  - [] Use AntD (or any CSS Framework)
+  - [] CSS Module
+  - [] Form Validations
+  - [] Page Transitions
+  - [] Loading State
+  - [] Setup environment variables
+  - [] Setup API proxy with Axios
+  - [] More Accessibility
+  - [] Image Caching & Lazy Loading
+  - [] Inject axios globally as $http
+  - [] More test
 
     ### How much time (more or less) it took you to complete the task?
     
@@ -49,7 +50,7 @@ You've been given the task of creating a simple application with create/read/del
     ### What do you think about the task itself? (Was it a good experience? If not why?)
 
     ### Summary in a gif
-```
+
 - [ ] Invite us to your repository: @chayaline, @emilyrosina, @adamwardecki, @dangzo, @thomas-lhuillier, @SavanovicN & @Sergeon
 
 ## The specification
diff --git a/src/App.vue b/src/App.vue
index a766c33..13be9b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,14 +13,13 @@
 import { mapState } from "vuex";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
-import AddFruit from "@/components/AddFruit";
 
 export default {
   name: "App",
   components: {
     Footer,
     Header,
-    AddFruit
+    AddFruit: () => import("@/components/AddFruit")
   },
   computed: {
     ...mapState(["modalIsOpen"])
diff --git a/src/components/Form/ImageUnsplash/ImageUnsplash.vue b/src/components/Form/ImageUnsplash/ImageUnsplash.vue
index e4c42cb..881edbc 100644
--- a/src/components/Form/ImageUnsplash/ImageUnsplash.vue
+++ b/src/components/Form/ImageUnsplash/ImageUnsplash.vue
@@ -30,12 +30,11 @@
 
 <script>
 import { mapState } from "vuex";
-import ImageSkeleton from "./ImageSkeleton";
 
 export default {
   name: "ImageUnsplash",
   components: {
-    ImageSkeleton
+    ImageSkeleton: () => import("./ImageSkeleton")
   },
   props: {
     containerClass: {
diff --git a/src/components/Grid/Grid.vue b/src/components/Grid/Grid.vue
index 517a904..b362d3f 100644
--- a/src/components/Grid/Grid.vue
+++ b/src/components/Grid/Grid.vue
@@ -15,13 +15,12 @@
 <script>
 import { mapState } from "vuex";
 import GridItemSkeleton from "./GridItemSkeleton";
-import GridItem from "./GridItem";
 
 export default {
   name: "Grid",
   components: {
     GridItemSkeleton,
-    GridItem
+    GridItem: () => import("./GridItem")
   },
   props: {
     data: Array
diff --git a/src/components/Grid/GridItem.vue b/src/components/Grid/GridItem.vue
index 0abc170..eeda955 100644
--- a/src/components/Grid/GridItem.vue
+++ b/src/components/Grid/GridItem.vue
@@ -21,11 +21,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "./DeleteItem";
 
 export default {
   name: "GridItem",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("./DeleteItem") },
   props: {
     item: Object
   },
diff --git a/src/views/Fruit.vue b/src/views/Fruit.vue
index d2b04c2..1feb708 100644
--- a/src/views/Fruit.vue
+++ b/src/views/Fruit.vue
@@ -26,11 +26,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "@/components/Grid/DeleteItem";
 
 export default {
   name: "FruitDetails",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("@/components/Grid/DeleteItem") },
   data() {
     return {
       modalOpen: true
diff --git a/src/views/Fruits.vue b/src/views/Fruits.vue
index 767fe79..69b1a05 100644
--- a/src/views/Fruits.vue
+++ b/src/views/Fruits.vue
@@ -11,11 +11,10 @@
 
 <script>
 import { mapState } from "vuex";
-import Grid from "@/components/Grid/Grid";
 
 export default {
   name: "Fruits",
-  components: { Grid },
+  components: { Grid: () => import("@/components/Grid/Grid") },
   computed: {
     ...mapState(["fruits"])
   },