rename Loader to Loading

Author: mahboubii

README.md

@@ -68,7 +68,7 @@ MML React components could be divided in four categories:
 - [`Input`](/components/input): an input field
 - [`MD`](/components/md): renders markdown
 - [`Icon`](/components/icon): simply displays an icon from material design icons
-- [`Loader`](/components/loader): signals a _loading_ temporary state with a circular spinner
+- [`Loading`](/components/loading): signals a _loading_ temporary state with a circular spinner
 - [`Error`](/components/error): display an _error_ message
 - [`Success`](/components/success): display a _success_ message
 

src/components/Loader.mdx src/components/Loading.mdxsrc/components/Loader.mdx renamed to src/components/Loading.mdx

@@ -1,41 +1,41 @@
 ---
-route: /components/loader
+route: /components/loading
 menu: Utility Components
 ---
 
 import { Playground, Props } from 'docz';
-import { Loader } from './Loader.tsx';
+import { Loading } from './Loading.tsx';
 
-# Loader
+# Loading
 
-Loader simply indicates a loading/pending state, you can use it to manage users expectations during async behaviours or waiting times. Internally it uses the `<Progress />` component to show a circular progress indicator.
+Loading simply indicates a loading/pending state, you can use it to manage users expectations during async behaviours or waiting times. Internally it uses the `<Progress />` component to show a circular progress indicator.
 
 > This component is not exposed as `mml` string, it is used internally in other mml components and it can be imported to create your custom ones.
 
 ## Properties
 
-<Props of={Loader} />
+<Props of={Loading} />
 
 ## Basic usage
 
 <Playground>
-  <Loader loading={true} />
+  <Loading loading={true} />
 </Playground>
 
 ## With text
 
 <Playground>
-  <Loader loading={true} text="Please wait..." />
+  <Loading loading={true} text="Please wait..." />
 </Playground>
 
 ## Style customization
 
 If your projects include a `sass` compilation step you might customize the overall look and feel of the component through `scss` variables, here are all the available ones with their default values:
 
 ```scss
-// Loader:
-$mml-loader-spacer: $mml-spacer;
-$mml-loader-font-size: 88%;
+// Loading:
+$mml-loading-spacer: $mml-spacer;
+$mml-loading-font-size: 88%;
 
 // Progress:
 $mml-progress-width: 1em;

src/components/Loader.tsx src/components/Loading.tsxsrc/components/Loader.tsx renamed to src/components/Loading.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Progress, ProgressProps } from './Progress';
 
-export type LoaderProps = {
+export type LoadingProps = {
   /**
    * Flag that indicates whether the component should show
    * @default false
@@ -19,15 +19,15 @@ export type LoaderProps = {
 } & ProgressProps;
 
 /**
- * Loader indicator
+ * Loading indicator
  */
-export const Loader: FC<LoaderProps> = ({ className = '', loading = false, text, size, thickness, color }) => {
+export const Loading: FC<LoadingProps> = ({ className = '', loading = false, text, size, thickness, color }) => {
   if (!loading) return null;
 
   return (
-    <div className={`mml-loader ${className}`}>
+    <div className={`mml-loading ${className}`}>
       <Progress {...{ size, thickness, color }} />
-      {text && <div className="mml-loader__text">{text}</div>}
+      {text && <div className="mml-loading__text">{text}</div>}
     </div>
   );
 };

src/components/Scheduler.tsx

@@ -8,7 +8,7 @@ import { Card } from './Card';
 import { CardHeader } from './CardHeader';
 import { CardBody } from './CardBody';
 import { Error as ErrorComponent } from './Error';
-import { Loader as LoaderComponent } from './Loader';
+import { Loading as LoadingComponent } from './Loading';
 
 export type SchedulerProps = {
   /**
@@ -104,7 +104,7 @@ export const Scheduler: FC<SchedulerProps> = ({
       <CardHeader icon="date_range" text="Scheduler" />
       <CardBody>
         {error && !loading && <ErrorComponent error={`Failed, error: ${error}`} />}
-        {!error && loading && <LoaderComponent loading={true} text="Loading availability" />}
+        {!error && loading && <LoadingComponent loading={true} text="Loading availability" />}
         {!error && !loading && (
           <DatePicker
             name={name}

src/components/index.tsx

@@ -11,7 +11,7 @@ export * from './Error';
 export * from './Icon';
 export * from './Image';
 export * from './Input';
-export * from './Loader';
+export * from './Loading';
 export * from './MD';
 export * from './Number';
 export * from './Row';

src/mml/MML.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback, FC, ComponentType, FormEvent } from 'react';
 
 import { Parse, ConvertorType } from '../parser';
-import { Loader as LoaderComponent, LoaderProps } from '../components/Loader';
+import { Loading as LoadingComponent, LoadingProps } from '../components/Loading';
 import { Error as ErrorComponent, ErrorProps } from '../components/Error';
 import { Success as SuccessComponent, SuccessProps } from '../components/Success';
 
@@ -26,12 +26,12 @@ export type MMLProps = {
     | string;
   /** Custom classname, appended to wrapper classname */
   className?: string;
-  /** The Loader component */
-  Loader?: ComponentType<LoaderProps>;
-  /** The error component */
-  Error?: ComponentType<ErrorProps>;
-  /** The success message component */
-  Success?: ComponentType<SuccessProps>;
+  /** The Loading component, accepts null to render nothing */
+  Loading?: ComponentType<LoadingProps> | null;
+  /** The error component, accepts null to render nothing */
+  Error?: ComponentType<ErrorProps> | null;
+  /** The success message component, accepts null to render nothing */
+  Success?: ComponentType<SuccessProps> | null;
 };
 
 /**
@@ -43,7 +43,7 @@ export const MML: FC<MMLProps> = ({
   converters,
   theme = '',
   className = '',
-  Loader = LoaderComponent,
+  Loading = LoadingComponent,
   Error = ErrorComponent,
   Success = SuccessComponent,
 }) => {
@@ -85,15 +85,13 @@ export const MML: FC<MMLProps> = ({
   return (
     <div className={`mml-container ${theme} ${className}`} data-testid="mml-container">
       {error ? (
-        <div className="mml-wrap">
-          <Error error={error} />
-        </div>
+        <div className="mml-wrap">{Error && <Error error={error} />}</div>
       ) : (
         <form onSubmit={handleSubmit} className="mml-wrap" data-testid="mml-form">
           {tree?.type ? <div className="mml-card">{tree?.reactElements}</div> : tree?.reactElements}
-          {submitState.loading && <Loader loading={submitState.loading} />}
-          {submitState.success && <Success success={submitState.success} />}
-          {submitState.error && <Error error={submitState.error} />}
+          {submitState.loading && Loading && <Loading loading={submitState.loading} />}
+          {submitState.success && Success && <Success success={submitState.success} />}
+          {submitState.error && Error && <Error error={submitState.error} />}
         </form>
       )}
     </div>

src/styles/common/_variables.scss

@@ -134,10 +134,10 @@ $mml-input-color: mml-theme-val(text-mid-emphasis) !default;
 $mml-input-focus-color: mml-theme-val(text-high-emphasis) !default;
 $mml-input-focus-outline: $mml-btn-focus-outline !default;
 
-// Loader:
+// Loading:
 // -----------------------------------------------------------------------------
-$mml-loader-spacer: $mml-spacer !default;
-$mml-loader-font-size: 88% !default;
+$mml-loading-spacer: $mml-spacer !default;
+$mml-loading-font-size: 88% !default;
 
 // Progress:
 // -----------------------------------------------------------------------------

src/styles/components/Loader/_base.scss

@@ -0,0 +1,13 @@
+@import '../Progress/base';
+
+@include mml-component('loading') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $mml-loading-spacer;
+  font-size: $mml-loading-font-size;
+
+  &__text {
+    padding-left: $mml-loading-spacer;
+  }
+}

src/styles/components/Loading/_base.scss

@@ -8,7 +8,7 @@
 @import 'Icon/base';
 @import 'Image/base';
 @import 'Input/base';
-@import 'Loader/base';
+@import 'Loading/base';
 @import 'MD/base';
 @import 'Number/base';
 @import 'Row/base';