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",