From 33cf8902a20267b06e40b07a818cbb15d7191074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Martin?= <jerome.martin@corp.ovh.com>
Date: Fri, 18 Jan 2019 15:42:24 +0100
Subject: [PATCH] feat(oui-datagrid): add skeletons when loading data

---
 packages/oui-datagrid/src/datagrid.html | 1 +
 packages/oui-datagrid/src/index.spec.js | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/oui-datagrid/src/datagrid.html b/packages/oui-datagrid/src/datagrid.html
index 8624c676..21013031 100644
--- a/packages/oui-datagrid/src/datagrid.html
+++ b/packages/oui-datagrid/src/datagrid.html
@@ -65,6 +65,7 @@
                                 column="column"
                                 index="rowIndex">
                             </oui-datagrid-cell>
+                            <oui-skeleton ng-if="row && row.$promise && !$ctrl.hasProperty(row, column.name)"></oui-skeleton>
                         </td>
                         <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
                             class="oui-datagrid__cell oui-datagrid__cell-sticky">
diff --git a/packages/oui-datagrid/src/index.spec.js b/packages/oui-datagrid/src/index.spec.js
index 6c2d23c6..06b433c2 100644
--- a/packages/oui-datagrid/src/index.spec.js
+++ b/packages/oui-datagrid/src/index.spec.js
@@ -115,7 +115,7 @@ describe("ouiDatagrid", () => {
                 expect(getCell($firstRow, 2).children().html()).toBe(additionnalDataValue);
             }));
 
-            it("should keep undefined when a cell is not loaded", inject(($q) => {
+            it("should display a skeleton when a cell is not loaded", inject(($q) => {
                 const deferred = $q.defer();
                 const loadRowSpy = jasmine.createSpy("loadRow");
 
@@ -138,7 +138,7 @@ describe("ouiDatagrid", () => {
                 expect(loadRowSpy.calls.count()).toEqual(1);
 
                 expect(getCell($firstRow, 0).children().html()).toBe(fakeData[0].firstName);
-                expect(getCell($firstRow, 2).children().html()).toBeUndefined();
+                expect(getCell($firstRow, 2).children()[0].tagName.toLowerCase()).toBe("oui-skeleton");
             }));
 
             it("should load data later and display it", inject(($q) => {
@@ -557,7 +557,7 @@ describe("ouiDatagrid", () => {
                 expect(getCell($fifthRow, 1).children().html()).toBe(fakeData[4].lastName);
             });
 
-            it("should keep undefined when a cell is not loaded", inject(($q) => {
+            it("should display a skeleton when a cell is not loaded", inject(($q) => {
                 const deferred = $q.defer();
                 const loadRowSpy = jasmine.createSpy("loadRow");
 
@@ -590,7 +590,7 @@ describe("ouiDatagrid", () => {
                 expect(loadRowSpy.calls.count()).toEqual(1);
 
                 expect(getCell($firstRow, 0).children().html()).toBe(fakeData[0].firstName);
-                expect(getCell($firstRow, 2).children().html()).toBeUndefined();
+                expect(getCell($firstRow, 2).children()[0].tagName.toLowerCase()).toBe("oui-skeleton");
             }));
 
             it("should load data later and display it", inject(($q) => {