nytai commented on a change in pull request #10094:
URL: 
https://github.com/apache/incubator-superset/pull/10094#discussion_r442949081



##########
File path: superset-frontend/src/components/ListView/ListView.tsx
##########
@@ -116,124 +118,117 @@ const ListView: FunctionComponent<Props> = ({
       }
     });
   }
-
+  if (loading && !data.length) {
+    return <Loading />;
+  }
   return (
-    <div className={`superset-list-view ${className}`}>
-      <div className="header">
-        {!useNewUIFilters && (
-          <>
-            {title && filterable && (
-              <>
-                <Row>
-                  <Col md={11}>
-                    <h2>{t(title)}</h2>
-                  </Col>
-                  {filterable && (
-                    <Col md={1}>
-                      <FilterMenu
-                        filters={filters}
-                        internalFilters={internalFilters}
-                        setInternalFilters={setInternalFilters}
-                      />
-                    </Col>
-                  )}
-                </Row>
-                <hr />
-                <FilterInputs
-                  internalFilters={internalFilters}
-                  filters={filters}
-                  updateInternalFilter={updateInternalFilter}
-                  removeFilterAndApply={removeFilterAndApply}
-                  filtersApplied={filtersApplied}
-                  applyFilters={applyFilters}
-                />
-              </>
-            )}
-          </>
-        )}
-        {useNewUIFilters && (
-          <>
-            <Row>
-              <Col md={10}>
-                <h2>{t(title)}</h2>
-              </Col>
-            </Row>
-            <hr />
+    <div className="superset-list-view-container">
+      <div className={`superset-list-view ${className}`}>
+        <div className="header">
+          {!useNewUIFilters && (
+            <>
+              {title && filterable && (
+                <>
+                  <Row>
+                    <Col md={10} />
+                    {filterable && (
+                      <Col md={2}>
+                        <FilterMenu
+                          filters={filters}
+                          internalFilters={internalFilters}
+                          setInternalFilters={setInternalFilters}
+                        />
+                      </Col>
+                    )}
+                  </Row>
+                  <hr />
+                  <FilterInputs
+                    internalFilters={internalFilters}
+                    filters={filters}
+                    updateInternalFilter={updateInternalFilter}
+                    removeFilterAndApply={removeFilterAndApply}
+                    filtersApplied={filtersApplied}
+                    applyFilters={applyFilters}
+                  />
+                </>
+              )}
+            </>
+          )}
+          {useNewUIFilters && (
             <FilterControls
               filters={filters}
               internalFilters={internalFilters}
               updateFilterValue={applyFilterValue}
             />
-          </>
-        )}
-      </div>
-      <div className="body">
-        <TableCollection
-          getTableProps={getTableProps}
-          getTableBodyProps={getTableBodyProps}
-          prepareRow={prepareRow}
-          headerGroups={headerGroups}
-          rows={rows}
-          loading={loading}
-        />
-      </div>
-      <div className="footer">
-        <Row>
-          <Col md={2}>
-            <div className="form-actions-container">
-              <div className="btn-group">
-                {bulkActions.length > 0 && (
-                  <DropdownButton
-                    id="bulk-actions"
-                    bsSize="small"
-                    bsStyle="default"
-                    noCaret
-                    title={
-                      <>
-                        {t('Actions')} <span className="caret" />
-                      </>
-                    }
-                  >
-                    {bulkActions.map(action => (
-                      // @ts-ignore
-                      <MenuItem
-                        key={action.key}
-                        eventKey={selectedFlatRows}
+          )}
+        </div>
+        <div className="body">
+          <TableCollection
+            getTableProps={getTableProps}
+            getTableBodyProps={getTableBodyProps}
+            prepareRow={prepareRow}
+            headerGroups={headerGroups}
+            rows={rows}
+            loading={loading}
+          />
+        </div>
+        <div className="footer">
+          <Row>
+            <Col>
+              <div className="form-actions-container">
+                <div className="btn-group">
+                  {bulkActions.length > 0 && (
+                    <DropdownButton
+                      id="bulk-actions"
+                      bsSize="small"
+                      bsStyle="default"
+                      noCaret
+                      title={
+                        <>
+                          {t('Actions')} <span className="caret" />
+                        </>
+                      }
+                    >
+                      {bulkActions.map(action => (
                         // @ts-ignore
-                        onSelect={(selectedRows: typeof selectedFlatRows) => {
-                          action.onSelect(
-                            selectedRows.map((r: any) => r.original),
-                          );
-                        }}
-                      >
-                        {action.name}
-                      </MenuItem>
-                    ))}
-                  </DropdownButton>
-                )}
+                        <MenuItem
+                          key={action.key}
+                          eventKey={selectedFlatRows}
+                          // @ts-ignore
+                          onSelect={(selectedRows: typeof selectedFlatRows) => 
{
+                            action.onSelect(
+                              selectedRows.map((r: any) => r.original),
+                            );
+                          }}
+                        >
+                          {action.name}
+                        </MenuItem>
+                      ))}
+                    </DropdownButton>
+                  )}
+                </div>
               </div>
-            </div>
-          </Col>
-          <Col md={8} className="text-center">
-            <Pagination
-              totalPages={pageCount || 0}
-              currentPage={pageCount ? pageIndex + 1 : 0}
-              onChange={(p: number) => gotoPage(p - 1)}
-              hideFirstAndLastPageLinks
-            />
-          </Col>
-          <Col md={2}>
-            <span className="pull-right">
-              {t('showing')}{' '}
-              <strong>
-                {pageSize * pageIndex + (rows.length && 1)}-
-                {pageSize * pageIndex + rows.length}
-              </strong>{' '}
-              {t('of')} <strong>{count}</strong>
-            </span>
-          </Col>
-        </Row>
+            </Col>
+
+            <Col>
+              <span className="row-count-container">
+                {t('showing')}{' '}
+                <strong>
+                  {pageSize * pageIndex + (rows.length && 1)}-
+                  {pageSize * pageIndex + rows.length}
+                </strong>{' '}
+                {t('of')} <strong>{count}</strong>

Review comment:
       @etr2460 I wrote this before I really understood how translation strings 
worked. Any idea how to get the html (`<strong>`) interspersed in the 
translation string? 




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to