Table: support loading status widgets

src/components/Table.js

@@ -87,10 +87,11 @@ export default initial_vnode => {
 				model.select(offset, limit)
 			}
 
-			return [
-				m('table', {
-					style: vnode.attrs.show ? undefined : {display: 'none'},
-				}, [
+			return m('main', {
+				style: vnode.attrs.show ? undefined : {display: 'none'}
+			}, [
+				// the table
+				m('table', [
 					// always show table header
 					m('thead', m('tr', [
 						vnode.attrs.serial ? m('th.centered', '序号') : undefined,
@@ -120,21 +121,24 @@ export default initial_vnode => {
 
 							return m(`td${column.class || ''}`, {style: column.style || undefined}, v)
 						})
-					]))) : m('', 'Empty')
+					]))) : undefined
 				]),
 
-				// page navigation
-				pages.length > 1 && vnode.attrs.show ?
-					m('.centered',
-						m('.pagination.centered', pages.map((page, i) => page.show ? m('a', {
-							class: page.active ? 'active' : '',
-							onclick: e => {
-								offset = i*limit
-								model.select(offset, limit)
-							}
-						}, i+1) : undefined))
-					 ) : undefined
-			]
+				// status area
+				model.data(offset, limit).length ? undefined : (
+					model.loading() ? (vnode.attrs.loading_indicator || m('', 'Loading')) : (vnode.attrs.empty_indicator || m('', 'Empty'))
+				),
+
+				// the page navigation
+				(pages.length > 1) ? m('.centered', m('.pagination.centered', pages.map(
+					(page, i) => page.show ? m('a', {
+						class: page.active ? 'active' : '',
+						onclick: e => {
+							offset = i*limit
+							model.select(offset, limit)
+						}
+					}, i+1) : undefined))) : undefined
+			])
 		}
 	}
 }