Feature - ASL-2767 - Provide some kind of spinner when datatables are…

… loading

* Added LoadingSpinner component used in moj project alphagov/govuk-design-system-backlog#28 (comment)
* Show loading spinner over datatable while data is fetching
* Renamed package to @asl/components and updated registry back to artifactory, as this breaks in numerous places in the ASL projects.

.npmrc

@@ -1,4 +1,4 @@
-@ukhomeoffice:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
-
+@asl:registry = https://artifactory.digital.homeoffice.gov.uk/artifactory/api/npm/npm-virtual/
 
+//artifactory.digital.homeoffice.gov.uk/artifactory/api/npm/npm-virtual/:username=${NPM_AUTH_USERNAME}
+//artifactory.digital.homeoffice.gov.uk/artifactory/api/npm/npm-virtual/:_password=${NPM_AUTH_TOKEN}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ukhomeoffice/components",
+  "name": "@asl/components",
   "version": "11.0.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/ukhomeoffice/asl-components#readme",
   "publishConfig": {
-    "@ukhomeoffice:registry": "https://npm.pkg.github.com"
+    "registry": "https://artifactory.digital.homeoffice.gov.uk/artifactory/api/npm/npm-virtual/"
   },
   "dependencies": {
     "@ukhomeoffice/asl-constants": "^2.0.0",

src/datatable/index.jsx

@@ -8,6 +8,7 @@ import pickBy from 'lodash/pickBy';
 import { getValue } from '../utils';
 import DatatableHeader from './header';
 import { Pagination } from '../';
+import { LoadingSpinner } from '../loading-spinner';
 
 export function Row({ row, schema, Expandable, Actions, expands, alwaysExpanded }) {
     const rowExpands = expands(row);
@@ -108,6 +109,9 @@ export function Datatable({
                 <tr id="filter-header"></tr>
             </thead>
             <tbody>
+                {
+                    isFetching && <div className="loading-overlay"><LoadingSpinner small /></div>
+                }
                 {
                     data.length === 0 && noDataWarning && <tr><td colSpan={colSpan}>{noDataWarning}</td></tr>
                 }

src/datatable/index.scss

@@ -98,4 +98,20 @@
       }
     }
   }
+
+  tbody {
+    position: relative;
+
+    .loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.7);
+    }
+  }
 }

src/index.jsx

@@ -41,6 +41,7 @@ export { default as LicenceStatusBanner } from './licence-status-banner';
 export { default as Link } from './link';
 export { default as LinkFilter } from './link-filter';
 export { default as LinkFilterList } from './link-filter-list';
+export { default as LoadingSpinner } from './loading-spinner';
 export { default as Markdown } from './markdown';
 export { default as ModelSummary } from './model-summary';
 export { default as Metric } from './metric';

src/loading-spinner/index.jsx

@@ -0,0 +1,6 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export function LoadingSpinner({ small = false }) {
+    return <div className={classNames('govuk-spinner', { small })} />;
+}

src/loading-spinner/index.scss

@@ -0,0 +1,31 @@
+.govuk-spinner {
+  border: 12px solid #dee0e2;
+  border-radius: 50%;
+  border-top-color: #005ea5;
+  width: 80px;
+  height: 80px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+
+  &.small {
+    width: 40px;
+    height: 40px;
+    border-width: 6px;
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

styles/index.scss

@@ -26,6 +26,7 @@ $highlight-colour: govuk-colour('grey-4');
 @import '../src/header/index';
 @import '../src/link-filter/index';
 @import '../src/link-filter-list/index';
+@import '../src/loading-spinner/index';
 @import '../src/metric/index';
 @import '../src/model-summary/index';
 @import '../src/multi-input/index';