From 7acd9dae553d42a2c6884fa0eb45214f492a78d2 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Wed, 24 May 2023 14:21:18 -0700 Subject: [PATCH 1/2] fix: table: fix loading compare and updates default spinner size and position --- src/components/Table/Styles/table.module.scss | 6 + src/components/Table/Table.stories.tsx | 5 + src/components/Table/Table.tsx | 14 +- .../__snapshots__/empty.renderloading.shot | 429 +++++++++--------- 4 files changed, 246 insertions(+), 208 deletions(-) diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index 0fee6fd87..fd76db5f1 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -700,6 +700,12 @@ } } +.table-spinner { + align-items: center; + display: flex; + justify-content: center; +} + .table-filter-dropdown { &-tree { padding: 8px 8px 0; diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index 229574b05..86197540f 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -101,6 +101,10 @@ export default { onRowHoverLeave: { action: 'onMouseLeave', }, + loading: { + options: [true, false], + control: { type: 'inline-radio' }, + }, }, } as ComponentMeta; @@ -1409,6 +1413,7 @@ const tableArgs: Object = { bordered: true, classNames: 'my-table-class', id: 'myTableId', + loading: false, columns: basicCols, dataSource: data, pagination: { diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 4023d47e9..23d23aa8d 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -687,10 +687,18 @@ function InternalTable( } } - if (typeof loading === 'boolean') { - return ; + if (typeof loading === 'boolean' && loading) { + return ( +
+ +
+ ); } else if (typeof loading === 'object') { - return ; + return ( +
+ +
+ ); } const renderEmpty = ( diff --git a/src/components/Table/Tests/__snapshots__/empty.renderloading.shot b/src/components/Table/Tests/__snapshots__/empty.renderloading.shot index 1ca6b2303..c78a7b5bd 100644 --- a/src/components/Table/Tests/__snapshots__/empty.renderloading.shot +++ b/src/components/Table/Tests/__snapshots__/empty.renderloading.shot @@ -4,92 +4,155 @@ exports[`Table renders empty table without emptyText when loading 1`] = ` LoadedCheerio { "0": Node { "attribs": Object { - "aria-hidden": "false", - "class": "spinner icon-wrapper", - "role": "presentation", + "class": "table-spinner", }, "children": Array [ Node { "attribs": Object { + "aria-hidden": "false", + "class": "spinner icon-wrapper", "role": "presentation", - "style": "width:64px;height:64px", - "viewBox": "0 0 24 24", }, "children": Array [ Node { - "attribs": Object {}, + "attribs": Object { + "role": "presentation", + "style": "width:48px;height:48px", + "viewBox": "0 0 24 24", + }, "children": Array [ Node { - "data": "@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/2000/svg", - "next": Node { - "attribs": Object { - "style": "animation:spin linear 0.8s infinite;transform-origin:center", - }, - "children": Array [ - Node { - "attribs": Object { - "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", - "style": "fill:currentColor", - }, - "children": Array [], - "name": "path", - "namespace": "http://www.w3.org/2000/svg", - "next": Node { - "attribs": Object { - "fill": "transparent", - "height": "24", - "width": "24", - }, - "children": Array [], - "name": "rect", - "namespace": "http://www.w3.org/2000/svg", + "attribs": Object {}, + "children": Array [ + Node { + "data": "@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }", "next": null, "parent": [Circular], - "prev": [Circular], - "type": "tag", - "x-attribsNamespace": Object { - "fill": undefined, - "height": undefined, - "width": undefined, + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/2000/svg", + "next": Node { + "attribs": Object { + "style": "animation:spin linear 0.8s infinite;transform-origin:center", + }, + "children": Array [ + Node { + "attribs": Object { + "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", + "style": "fill:currentColor", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": Node { + "attribs": Object { + "fill": "transparent", + "height": "24", + "width": "24", + }, + "children": Array [], + "name": "rect", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "style": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "style": undefined, + }, }, - "x-attribsPrefix": Object { - "fill": undefined, - "height": undefined, - "width": undefined, + Node { + "attribs": Object { + "fill": "transparent", + "height": "24", + "width": "24", + }, + "children": Array [], + "name": "rect", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": Node { + "attribs": Object { + "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", + "style": "fill:currentColor", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "style": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "style": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, }, - }, + ], + "name": "g", + "namespace": "http://www.w3.org/2000/svg", + "next": null, "parent": [Circular], - "prev": null, + "prev": [Circular], "type": "tag", "x-attribsNamespace": Object { - "d": undefined, "style": undefined, }, "x-attribsPrefix": Object { - "d": undefined, "style": undefined, }, }, - Node { - "attribs": Object { - "fill": "transparent", - "height": "24", - "width": "24", - }, - "children": Array [], - "name": "rect", - "namespace": "http://www.w3.org/2000/svg", - "next": null, - "parent": [Circular], - "prev": Node { + "parent": [Circular], + "prev": null, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + Node { + "attribs": Object { + "style": "animation:spin linear 0.8s infinite;transform-origin:center", + }, + "children": Array [ + Node { "attribs": Object { "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", "style": "fill:currentColor", @@ -97,7 +160,30 @@ LoadedCheerio { "children": Array [], "name": "path", "namespace": "http://www.w3.org/2000/svg", - "next": [Circular], + "next": Node { + "attribs": Object { + "fill": "transparent", + "height": "24", + "width": "24", + }, + "children": Array [], + "name": "rect", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + }, "parent": [Circular], "prev": null, "type": "tag", @@ -110,184 +196,121 @@ LoadedCheerio { "style": undefined, }, }, - "type": "tag", - "x-attribsNamespace": Object { - "fill": undefined, - "height": undefined, - "width": undefined, - }, - "x-attribsPrefix": Object { - "fill": undefined, - "height": undefined, - "width": undefined, - }, - }, - ], - "name": "g", - "namespace": "http://www.w3.org/2000/svg", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "tag", - "x-attribsNamespace": Object { - "style": undefined, - }, - "x-attribsPrefix": Object { - "style": undefined, - }, - }, - "parent": [Circular], - "prev": null, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - Node { - "attribs": Object { - "style": "animation:spin linear 0.8s infinite;transform-origin:center", - }, - "children": Array [ - Node { - "attribs": Object { - "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", - "style": "fill:currentColor", - }, - "children": Array [], - "name": "path", - "namespace": "http://www.w3.org/2000/svg", - "next": Node { - "attribs": Object { - "fill": "transparent", - "height": "24", - "width": "24", - }, - "children": Array [], - "name": "rect", - "namespace": "http://www.w3.org/2000/svg", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "tag", - "x-attribsNamespace": Object { - "fill": undefined, - "height": undefined, - "width": undefined, - }, - "x-attribsPrefix": Object { - "fill": undefined, - "height": undefined, - "width": undefined, + Node { + "attribs": Object { + "fill": "transparent", + "height": "24", + "width": "24", + }, + "children": Array [], + "name": "rect", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": Node { + "attribs": Object { + "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", + "style": "fill:currentColor", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "style": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "style": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "width": undefined, + }, }, - }, - "parent": [Circular], - "prev": null, - "type": "tag", - "x-attribsNamespace": Object { - "d": undefined, - "style": undefined, - }, - "x-attribsPrefix": Object { - "d": undefined, - "style": undefined, - }, - }, - Node { - "attribs": Object { - "fill": "transparent", - "height": "24", - "width": "24", - }, - "children": Array [], - "name": "rect", + ], + "name": "g", "namespace": "http://www.w3.org/2000/svg", "next": null, "parent": [Circular], "prev": Node { - "attribs": Object { - "d": "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z", - "style": "fill:currentColor", - }, - "children": Array [], - "name": "path", + "attribs": Object {}, + "children": Array [ + Node { + "data": "@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", "namespace": "http://www.w3.org/2000/svg", "next": [Circular], "parent": [Circular], "prev": null, - "type": "tag", - "x-attribsNamespace": Object { - "d": undefined, - "style": undefined, - }, - "x-attribsPrefix": Object { - "d": undefined, - "style": undefined, - }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, }, "type": "tag", "x-attribsNamespace": Object { - "fill": undefined, - "height": undefined, - "width": undefined, + "style": undefined, }, "x-attribsPrefix": Object { - "fill": undefined, - "height": undefined, - "width": undefined, + "style": undefined, }, }, ], - "name": "g", + "name": "svg", "namespace": "http://www.w3.org/2000/svg", "next": null, "parent": [Circular], - "prev": Node { - "attribs": Object {}, - "children": Array [ - Node { - "data": "@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/2000/svg", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, + "prev": null, "type": "tag", "x-attribsNamespace": Object { + "role": undefined, "style": undefined, + "viewBox": undefined, }, "x-attribsPrefix": Object { + "role": undefined, "style": undefined, + "viewBox": undefined, }, }, ], - "name": "svg", - "namespace": "http://www.w3.org/2000/svg", + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", "next": null, "parent": [Circular], "prev": null, "type": "tag", "x-attribsNamespace": Object { + "aria-hidden": undefined, + "class": undefined, "role": undefined, - "style": undefined, - "viewBox": undefined, }, "x-attribsPrefix": Object { + "aria-hidden": undefined, + "class": undefined, "role": undefined, - "style": undefined, - "viewBox": undefined, }, }, ], - "name": "span", + "name": "div", "namespace": "http://www.w3.org/1999/xhtml", "next": null, "parent": Node { @@ -303,14 +326,10 @@ LoadedCheerio { "prev": null, "type": "tag", "x-attribsNamespace": Object { - "aria-hidden": undefined, "class": undefined, - "role": undefined, }, "x-attribsPrefix": Object { - "aria-hidden": undefined, "class": undefined, - "role": undefined, }, }, "_root": LoadedCheerio { From fadc41b2c8f0089ccb4a45694ed8f4a228e03966 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Wed, 24 May 2023 14:28:46 -0700 Subject: [PATCH 2/2] chore: table: inherit spinner div height --- src/components/Table/Styles/table.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index fd76db5f1..282616bbb 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -703,6 +703,7 @@ .table-spinner { align-items: center; display: flex; + height: inherit; justify-content: center; }