Add inline loader (#870)

app-typescript/components/Loader.tsx

@@ -1,18 +1,36 @@
 import * as React from 'react';
 
-interface IProps {
- overlay?: boolean;
+interface IPropsOverlay {
+ overlay: true;
+ backgroundColor?: React.CSSProperties['backgroundColor'];
 }
 
+interface IPropsInline {
+ overlay?: false;
+ width?: React.CSSProperties['width'];
+ height?: React.CSSProperties['height'];
+ backgroundColor?: React.CSSProperties['backgroundColor'];
+}
+
+type IProps = IPropsOverlay | IPropsInline;
+
 export class Loader extends React.Component<IProps> {
  render() {
-
  if (this.props.overlay) {
  return (
- <div className='sd-loader'></div>
+ <div className="sd-loader" style={{backgroundColor: this.props.backgroundColor}} />
  );
  } else {
- return null;
+ return (
+ <div
+ className="sd-loader--inline"
+ style={{
+ width: this.props.width,
+ height: this.props.height,
+ backgroundColor: this.props.backgroundColor,
+ }}
+ />
+ );
  }
  }
 }

app/styles/components/_sd-loader.scss

@@ -1,6 +1,24 @@
 // Animated loader
 
+.sd-loader--inline {
+ display: inline-flex;
+ width: 100%;
+ min-width: 90px;
+ height: 100%;
+ min-height: 30px;
+
+ // inlining img/three-dots.svg as base64 encoded URL to have loader ready on application start
+ // otherwise, loader image would only start downloading when it already needs to be shown
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTIwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3YjdiN2IiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYwIiBjeT0iMTUiIHI9IjkiIGZpbGwtb3BhY2l0eT0iMC4zIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSI5IiB0bz0iOSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjAuNSIgdG89IjAuNSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvc3ZnPg==");
+
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 60px;
+ background-color: var(--sd-colour-overlay-actioning);
+}
+
 .sd-loader {
+ @extend .sd-loader--inline;
  content: '';
  display: block;
  position: absolute;
@@ -9,9 +27,4 @@
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 99999;
- background-image: url(../img/three-dots.svg);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: 60px;
- background-color: var(--sd-colour-overlay-actioning);
 }

examples/pages/components/Index.tsx

@@ -84,6 +84,7 @@ import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
 import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
+import LoaderDoc from './Loader';
 
 
 interface IPages {
@@ -181,7 +182,11 @@ const pages: IPages = {
  "illustration-button": {
  name: 'Illustration Button',
  component: IllustrationButtonDoc,
- }
+ },
+ "loader": {
+ name: 'Loader',
+ component: LoaderDoc,
+ },
  }
  },
  navigationComponents: {

examples/pages/components/Loader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {Loader} from '../../../app-typescript';
+
+export default class LoaderDoc extends React.Component {
+ render() {
+ return (
+ <section className='docs-page__container'>
+ <h2 className='docs-page__h2'>Loader</h2>
+
+ <Markup.ReactMarkup>
+ <Markup.ReactMarkupPreview>
+ <Loader />
+ </Markup.ReactMarkupPreview>
+
+ <Markup.ReactMarkupCode>{`
+ <Loader />
+ `}
+ </Markup.ReactMarkupCode>
+ </Markup.ReactMarkup>
+ </section>
+ )
+ }
+}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "superdesk-ui-framework",
- "version": "3.1.15",
+ "version": "3.1.16",
  "license": "AGPL-3.0",
  "repository": {
  "type": "git",