@akinon/pz-theme 2.0.95-rc.0 → 2.0.95-rc.1

package/src/chrome/__tests__/theme-config-source.test.ts

@@ -93,7 +93,8 @@ describe('readThemeConfig', () => {
             lockScroll: true,
             padding: undefined,
             showSheetHandle: true,
-            stretchContent: false
+            stretchContent: false,
+            showLoading: true
           },
           autoTrigger: undefined,
           visibilityRules: undefined

package/src/chrome/placeholder-slugs.ts

@@ -63,6 +63,9 @@ export const PLACEHOLDER_SLUGS = {
   // Auth
   register: 'register-page-body',
   forgotPassword: 'forgot-password-body',
+  // The screen the reset MAIL lands on — a different page from the one that
+  // ASKS for the mail. `reset-password-block` is what fills it.
+  resetPassword: 'reset-password-body',
   guestLogin: 'guest-login-body',
 
   // Content

package/src/chrome/route-slug.ts

@@ -71,6 +71,13 @@ const DEFAULT_RULES: RouteSlugRule[] = [
     PLACEHOLDER_SLUGS.forgotPassword
   ],
   [/^\/users\/password\/reset(\/|$)/, PLACEHOLDER_SLUGS.forgotPassword],
+  // The screen the reset MAIL lands on, which is a different page from the one
+  // above: that one ASKS for the mail, this one is where the link goes. The
+  // token rides in the path as a catch-all — and may itself contain slashes —
+  // so the rule stops at the first boundary and lets the block read the rest.
+  // Ordering is safe either way: `/users/password/reset` and `/users/reset`
+  // cannot both match a path.
+  [/^\/users\/reset(\/|$)/, PLACEHOLDER_SLUGS.resetPassword],
   [/^\/(users\/)?auth\/guest(\/|$)/, PLACEHOLDER_SLUGS.guestLogin],
   [/^\/(users\/)?auth\/?$/, PLACEHOLDER_SLUGS.auth],
 
@@ -143,6 +150,10 @@ const PAGE_MOUNTED_SLUGS = new Set<string>([
   PLACEHOLDER_SLUGS.auth,
   PLACEHOLDER_SLUGS.register,
   PLACEHOLDER_SLUGS.forgotPassword,
+  // Mounted by its own layout beside the catch-all page that reads the token,
+  // for the same reason the two above are: the page is a client component, so
+  // the handover cannot live in it.
+  PLACEHOLDER_SLUGS.resetPassword,
   PLACEHOLDER_SLUGS.guestLogin,
   PLACEHOLDER_SLUGS.flatPage,
   // Mounted by the not-found boundary itself, which renders on any unmatched

package/src/index.ts

@@ -99,6 +99,16 @@ export {
   useOpenModalIds
 } from './overlays/overlay-bus';
 
+/**
+ * Which modal the composition is inside, for a brand's OWN auth surface: a
+ * hand-written form composed into a drawer can now close the drawer the way
+ * the built-in ones do. See `overlays/modal-host-context.tsx`.
+ */
+export {
+  useModalHostId,
+  useHostModalCloser
+} from './overlays/modal-host-context';
+
 export {
   readThemeModals,
   MODAL_PRESENTATIONS

package/src/overlays/__tests__/modal-loading.test.tsx

@@ -0,0 +1,235 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+import { clearAutoOpenRecord } from '../modal-frequency';
+import { buildModalChromeCss } from '../modal-chrome-css';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+import {
+  __resetOverlayBusForTests,
+  openModal,
+  closeModal,
+  registerModalHost
+} from '../overlay-bus';
+import { OverlayLoadingLayer } from '../overlay-loading';
+import { LayeredOverlaySurface } from '../overlay-surface';
+import ThemeModalMount from '../theme-modal-mount';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+
+/**
+ * What a modal shows while its composition is still committing.
+ *
+ * The pause is the commit, not a fetch: a composed modal's content ships with
+ * the page, and a large one mounts ninety blocks at once. So the host draws
+ * the panel and a loading layer in an urgent commit and reveals the
+ * composition in a transition — which is also why nothing here has to fight
+ * the clock: `act()` flushes transitions, so the tests see the settled state
+ * unless they render a surface directly.
+ */
+
+const mkModal = (chrome: Record<string, unknown> = {}): ThemeModal =>
+  readThemeModals([{ id: 'login', name: 'Login', chrome }])[0];
+
+const openWith = (chrome: Record<string, unknown> = {}, isDesigner = false) => {
+  if (isDesigner) {
+    (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner =
+      true;
+  }
+
+  render(
+    <ThemeModalMount modal={mkModal(chrome)}>
+      <p>composed content</p>
+    </ThemeModalMount>
+  );
+
+  act(() => {
+    openModal('login');
+  });
+};
+
+beforeEach(() => {
+  __resetOverlayBusForTests();
+  __resetModalPreviewForTests();
+  registerModalHost();
+  clearAutoOpenRecord('login');
+  delete (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner;
+});
+
+describe('the loading settings', () => {
+  it('is on for a modal that never mentioned it, and off when asked', () => {
+    expect(mkModal().chrome.showLoading).toBe(true);
+    expect(mkModal({ showLoading: false }).chrome.showLoading).toBe(false);
+  });
+
+  it('keeps an unauthored delay absent, so the surface default stands', () => {
+    expect(mkModal().chrome.loadingDelay).toBeUndefined();
+    // Zero is a real answer — "show it at once" — and must survive as one.
+    expect(mkModal({ loadingDelay: 0 }).chrome.loadingDelay).toBe(0);
+    expect(mkModal({ loadingDelay: 400 }).chrome.loadingDelay).toBe(400);
+    // A delay longer than the wait it explains is a typo.
+    expect(mkModal({ loadingDelay: 90000 }).chrome.loadingDelay).toBe(2000);
+    expect(mkModal({ loadingDelay: -5 }).chrome.loadingDelay).toBe(0);
+    expect(
+      mkModal({ loadingDelay: 'soon' }).chrome.loadingDelay
+    ).toBeUndefined();
+  });
+
+  it('keeps the label absence-preserving, since the package has no copy', () => {
+    expect(mkModal().chrome.loadingLabel).toBeUndefined();
+    expect(
+      mkModal({ loadingLabel: '   ' }).chrome.loadingLabel
+    ).toBeUndefined();
+    expect(mkModal({ loadingLabel: 'Yükleniyor' }).chrome.loadingLabel).toBe(
+      'Yükleniyor'
+    );
+  });
+});
+
+describe('the layer itself', () => {
+  const renderLayer = (props: { label?: string; delay?: number } = {}) => {
+    render(
+      <LayeredOverlaySurface
+        presentation="drawer"
+        overlayProps={{ ref: undefined, 'aria-modal': 'true' }}
+        ariaLabel="Login"
+        showBackdrop
+        closeOnOverlay={false}
+        onDismiss={() => undefined}
+        width={480}
+        widthUnit="px"
+        loading={<OverlayLoadingLayer {...props} />}
+        panelBusy
+      >
+        <p>composed content</p>
+      </LayeredOverlaySurface>
+    );
+
+    // The LAST one: a test that renders twice to compare two settings stacks
+    // two containers, and the first match would answer for the previous render.
+    return Array.from(
+      document.querySelectorAll('[data-part="loading"]')
+    ).pop() as HTMLElement;
+  };
+
+  it('starts invisible and fades in only after the delay', () => {
+    const layer = renderLayer({ delay: 400 });
+
+    expect(layer.style.opacity).toBe('0');
+    expect(layer.style.animation).toContain('400ms forwards');
+  });
+
+  it('falls back to the surface delay when the modal authored none', () => {
+    expect(renderLayer().style.animation).toContain('150ms forwards');
+  });
+
+  it('never takes a click meant for the panel underneath', () => {
+    expect(renderLayer().style.pointerEvents).toBe('none');
+  });
+
+  it('sizes itself in flow, so a scrolling panel cannot scroll it away', () => {
+    const layer = renderLayer();
+
+    expect(layer.style.position).toBe('');
+    // Fills a stretched panel's flex column; the min-height is what a centred
+    // dialog with nothing in it has to go on.
+    expect(layer.style.flex).toBe('1 1 auto');
+    expect(layer.style.minHeight).toBe('160px');
+  });
+
+  it('is silent for assistive tech until a designer gives it words', () => {
+    expect(renderLayer().getAttribute('aria-hidden')).toBe('true');
+
+    const labelled = renderLayer({ label: 'Yükleniyor' });
+
+    expect(labelled.getAttribute('aria-hidden')).toBeNull();
+    expect(
+      labelled.querySelector('[data-part="loading-text"]')?.textContent
+    ).toBe('Yükleniyor');
+  });
+
+  it('tells assistive tech the dialog is still filling', () => {
+    renderLayer();
+
+    expect(
+      document.querySelector('[role="dialog"]')?.getAttribute('aria-busy')
+    ).toBe('true');
+  });
+});
+
+describe('a modal that is holding one', () => {
+  it('has the composition and no layer left once the transition lands', () => {
+    openWith();
+
+    expect(screen.getByText('composed content')).toBeInTheDocument();
+    // Both halves go together: nothing drawn over the content, and no
+    // attribute left claiming the dialog is still filling.
+    expect(document.querySelector('[data-part="loading"]')).toBeNull();
+    expect(
+      document.querySelector('[role="dialog"]')?.getAttribute('aria-busy')
+    ).toBeNull();
+  });
+
+  it('draws no layer at all when the setting is off', () => {
+    openWith({ showLoading: false });
+
+    expect(screen.getByText('composed content')).toBeInTheDocument();
+    expect(document.querySelector('[data-part="loading"]')).toBeNull();
+  });
+
+  it('shows the composition at once in the canvas, where the wait is not real', () => {
+    openWith({}, true);
+
+    expect(screen.getByText('composed content')).toBeInTheDocument();
+    expect(document.querySelector('[data-part="loading"]')).toBeNull();
+  });
+
+  it('starts from the cheap commit again on the next open', () => {
+    openWith();
+
+    act(() => {
+      closeModal('login');
+    });
+
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+
+    act(() => {
+      openModal('login');
+    });
+
+    // The reopen is a fresh mount of the composition, so the reveal has to
+    // have been reset — a latched one would leave the second open with no
+    // layer to cover it.
+    expect(screen.getByText('composed content')).toBeInTheDocument();
+  });
+});
+
+describe('the designer styles', () => {
+  it('reach the layer, its mark and its words', () => {
+    const css = buildModalChromeCss({
+      id: 'login',
+      styles: {
+        'loading/background-color': '#ffffff',
+        'loading-mark/border-color': '#00321b',
+        'loading-text/font-size': '15px'
+      }
+    });
+
+    expect(css).toContain('[data-theme-modal="login"] [data-part="loading"]');
+    expect(css).toContain('[data-part="loading-mark"]');
+    expect(css).toContain('[data-part="loading-text"]');
+    // The panel's own inline styles would otherwise outrank every rule here.
+    expect(css).toContain('!important');
+  });
+});

package/src/overlays/__tests__/modal-registry.test.ts

@@ -63,7 +63,11 @@ describe('readThemeModals', () => {
           // surface, so an unauthored padding must stay unauthored here.
           padding: undefined,
           showSheetHandle: true,
-          stretchContent: false
+          stretchContent: false,
+          // On for a modal that never mentioned it, which is safe precisely
+          // because the layer waits: an unauthored delay leaves the surface's
+          // own 150ms, and nothing a small composition can outrun changes.
+          showLoading: true
         },
         autoTrigger: undefined,
         visibilityRules: undefined

package/src/overlays/modal-chrome-css.ts

@@ -41,7 +41,14 @@ export const MODAL_CHROME_PARTS = [
   'overlay',
   'close',
   'close-text',
-  'handle'
+  'handle',
+  // The layer shown while a composition is still committing, its mark, and the
+  // authored words beside it. Chrome rather than blocks for the usual reason:
+  // they are drawn by `overlay-loading.tsx` from inline styles and hang off no
+  // `[data-block-id]`, so no block part rule could ever reach them.
+  'loading',
+  'loading-mark',
+  'loading-text'
 ] as const;
 
 export type ModalChromePart = (typeof MODAL_CHROME_PARTS)[number];

package/src/overlays/modal-host-context.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+
+import { closeModal } from './overlay-bus';
+
+/**
+ * Which modal the composition being rendered is INSIDE.
+ *
+ * A composed form had no way to know. The consequence a shopper met: signing
+ * in inside the auth drawer left the drawer open over the page, because the
+ * only close a form could perform was `closeAllModals()` behind an authored
+ * toggle — and that toggle defaults to off, deliberately, since "close every
+ * modal on the page" is not something a form on a plain page should ever do
+ * unasked. So the safe default and the useful one were in conflict, and the
+ * live GANT drawer's SAVED config shows exactly how that ends — measured off
+ * the storefront's own payload, not off the shipped template: the OTP form has
+ * the toggle on and the login and register forms do not, so signing in with an
+ * e-mail left the drawer covering the page while the phone path closed it. A
+ * designer had no way to know they had to tick three separate boxes.
+ *
+ * With the host's id in hand the conflict disappears: a form closes THE MODAL
+ * IT IS IN, which is never a surprise, and a form that is not in one closes
+ * nothing at all.
+ *
+ * Same shape and same reason as `AuthFlowIdContext` — a host telling its
+ * composed children which instance of itself they belong to, because they are
+ * blocks at any depth and the host has no reference to hand them.
+ */
+const ModalHostIdContext = React.createContext<string>('');
+
+export const ModalHostIdProvider = ModalHostIdContext.Provider;
+
+/** The id of the modal this block is inside, or '' when it is not in one. */
+export const useModalHostId = (): string =>
+  React.useContext(ModalHostIdContext);
+
+/**
+ * "My task is finished — close the surface I am on."
+ *
+ * One helper rather than the same three lines in every block that can finish,
+ * because the rule is the same everywhere and the mistakes would not be: a
+ * form that closes a modal it is not in, or that closes one while the shopper
+ * still has something to read.
+ *
+ * Which blocks turn it on by DEFAULT is a judgement about their success state,
+ * not about the mechanism:
+ *
+ *  - a sign-in leaves nothing to read — the shopper is in — so the auth forms
+ *    default to closing, and that is the bug this whole family exists to fix;
+ *  - "check your inbox", "thanks for subscribing", "your password has been
+ *    changed" are the point of the success state, so those forms default to
+ *    staying open and let the designer decide otherwise.
+ *
+ * Returns a stable no-op when the block is not in a modal, so a caller can
+ * fire it unconditionally.
+ */
+export const useHostModalCloser = (enabled: boolean): (() => void) => {
+  const hostModalId = useModalHostId();
+
+  return React.useCallback(() => {
+    if (!enabled || !hostModalId) return;
+
+    closeModal(hostModalId);
+  }, [enabled, hostModalId]);
+};

package/src/overlays/modal-preview-host.tsx

@@ -10,6 +10,7 @@ import {
   OverlayCloseButton,
   OverlayHandleProps
 } from './overlay-surface';
+import { ModalHostIdProvider } from './modal-host-context';
 import ThemeModalMount from './theme-modal-mount';
 import { useEditorModals } from './use-editor-modals';
 import { useHeldModal } from './use-modal-preview';
@@ -167,7 +168,9 @@ export const ModalPreviewHost = ({
         chromeCss={chromeCss}
         header={header}
       >
-        {composition(modal.slug)}
+        <ModalHostIdProvider value={modal.id}>
+          {composition(modal.slug)}
+        </ModalHostIdProvider>
       </CentredModalSurface>
     ) : (
       <LayeredOverlaySurface
@@ -193,7 +196,9 @@ export const ModalPreviewHost = ({
         chromeCss={chromeCss}
         header={header}
       >
-        {composition(modal.slug)}
+        <ModalHostIdProvider value={modal.id}>
+          {composition(modal.slug)}
+        </ModalHostIdProvider>
       </LayeredOverlaySurface>
     );
 

package/src/overlays/modal-registry.ts

@@ -7,6 +7,7 @@ import type { VisibilityRules } from '../utils/visibility-rules';
 import {
   OVERLAY_BACKDROP_COLOR,
   OVERLAY_BACKDROP_OPACITY,
+  OVERLAY_LOADING_DELAY_MAX,
   OVERLAY_WIDTH_UNITS,
   SHEET_HEIGHT_FALLBACK,
   isSheetHeightLength,
@@ -152,6 +153,30 @@ export interface ModalChrome {
    */
   closeText?: string;
   closeTextSide?: 'before' | 'after';
+  /**
+   * Whether the panel shows a loading mark while its composition is still
+   * committing. Absent reads as ON, which cannot change how a published modal
+   * looks: the layer is invisible for its first `loadingDelay` ms, and a
+   * composition that commits in the same frame — every small one — has
+   * revealed itself long before that. What it buys is the large ones, where
+   * the panel's white surface is on screen for a beat with nothing in it.
+   *
+   * Off restores the single commit: the composition renders with the panel and
+   * nothing is drawn over it.
+   */
+  showLoading?: boolean;
+  /**
+   * How long the panel may be empty before the mark fades in, in ms. Absent
+   * means the historical-safe 150 — see `OVERLAY_LOADING_DELAY`.
+   */
+  loadingDelay?: number;
+  /**
+   * Words beside the mark. Absence-preserving for the same reason as
+   * `closeText`, and for one more: this package has no dictionary, so a
+   * default would be an English string on every storefront. Authored text is
+   * the only text.
+   */
+  loadingLabel?: string;
 }
 
 /**
@@ -602,7 +627,19 @@ const readChrome = (value: unknown, name: string): ModalChrome => {
     // a close text must not come out of here claiming an empty one, and the
     // side only means something once the text exists.
     closeText: asString(raw.closeText) || undefined,
-    closeTextSide: raw.closeTextSide === 'before' ? 'before' : undefined
+    closeTextSide: raw.closeTextSide === 'before' ? 'before' : undefined,
+    // Absent reads as on: the layer is invisible until the delay has passed,
+    // so turning it on for every published modal changes nothing a shopper
+    // sees except on the modals that were already keeping them waiting.
+    showLoading: asToggle(raw.showLoading, true),
+    // Read, not defaulted, on the same grounds as `padding`: 0 is a real
+    // answer ("show it at once"), so absence has to stay distinguishable.
+    loadingDelay: asOptionalClamped(
+      raw.loadingDelay,
+      0,
+      OVERLAY_LOADING_DELAY_MAX
+    ),
+    loadingLabel: asString(raw.loadingLabel) || undefined
   };
 };
 

package/src/overlays/overlay-loading.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import React from 'react';
+import { partAttrs } from '../utils';
+import { OVERLAY_LOADING_DELAY } from './overlay-tokens';
+
+/**
+ * What a modal shows while its composition is still arriving.
+ *
+ * The gap this exists for is not a fetch — a composed modal's content ships
+ * with the page, in the layout's payload — it is the COMMIT. Opening a drawer
+ * mounts the whole composition at once, and a large one (ninety blocks, a
+ * text block carrying half a megabyte of pasted markup) takes long enough
+ * that the panel's own white surface is on screen well before anything is in
+ * it. A shopper reads that as a broken drawer, which is why the host reveals
+ * the composition in a transition and puts this underneath in the meantime:
+ * the panel and this layer are the cheap commit, and they paint immediately.
+ *
+ * Two consequences follow from "the main thread is busy" and both shape the
+ * implementation:
+ *
+ *  - The reveal is a CSS animation, not a timer. A `setTimeout` scheduled to
+ *    show a spinner cannot fire while the thread it lives on is committing
+ *    the very tree it is waiting for.
+ *  - The layer carries no shopper-facing copy of its own. pz-theme has no
+ *    dictionary — it renders authored text — so an invented "Loading…" would
+ *    be an untranslatable English string on every storefront. The dialog
+ *    carries `aria-busy` instead, and a designer who wants words authors them.
+ */
+
+/**
+ * Re-exported from `overlay-tokens.ts`, which owns them so the server-side
+ * registry can clamp the authored delay without importing this client module.
+ *
+ * `OVERLAY_LOADING_DELAY` is long enough that a composition which commits in
+ * the same frame — the common case, and the one this must not disturb — never
+ * flashes a spinner, and short enough that it is not itself the pause it
+ * exists to explain.
+ */
+export {
+  OVERLAY_LOADING_DELAY,
+  OVERLAY_LOADING_DELAY_MAX
+} from './overlay-tokens';
+
+/** How long the layer takes to fade in once the delay has passed. */
+const OVERLAY_LOADING_FADE = 120;
+
+/**
+ * The reveal and the spin. Keyframes cannot be written inline, and the
+ * `prefers-reduced-motion` answer cannot either — a shopper who asked for
+ * less motion still gets the affordance, just still.
+ *
+ * Scoped through the layer's own part attribute rather than emitted bare, so
+ * a page with two overlays up does not have two authors for one selector.
+ */
+const OVERLAY_LOADING_CSS = [
+  '@keyframes pz-overlay-loading-in{from{opacity:0}to{opacity:1}}',
+  '@keyframes pz-overlay-loading-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}',
+  '@media (prefers-reduced-motion: reduce){' +
+    '[data-part="loading"] [data-part="loading-mark"]{animation:none}}'
+].join('');
+
+export interface OverlayLoadingLayerProps {
+  /**
+   * Visible text beside the mark, if the designer authored one. Absent means
+   * the mark alone — see the note on copy above.
+   */
+  label?: string;
+  /** ms before the layer fades in. See `OVERLAY_LOADING_DELAY`. */
+  delay?: number;
+}
+
+/**
+ * The layer itself: a mark centred in the panel, invisible for its first
+ * `delay` ms.
+ *
+ * In FLOW, not absolutely positioned, and that is deliberate: the panel is
+ * `overflow: auto`, so `inset: 0` would anchor to the scrollable content box
+ * and scroll away rather than stay centred — and a stretched panel is a flex
+ * column, where an out-of-flow child leaves the column with nothing to size.
+ * In flow, `flex: 1 1 auto` fills a stretched drawer and `min-height` gives a
+ * centred dialog something to be while it is empty. Nothing is drawn over the
+ * composition either way: the host renders one or the other, never both.
+ *
+ * Inert regardless, because the panel underneath is already listening for
+ * clicks it must keep receiving.
+ */
+export const OverlayLoadingLayer = ({
+  label,
+  delay = OVERLAY_LOADING_DELAY
+}: OverlayLoadingLayerProps) => (
+  <div
+    {...partAttrs('loading')}
+    /**
+     * Hidden from assistive tech when it is a bare spinner: the dialog's own
+     * `aria-busy` is the fact a screen reader needs, and a wordless status
+     * region announced the instant a drawer opens talks over the dialog's
+     * name. Authored text is real content and stays readable.
+     */
+    aria-hidden={label ? undefined : true}
+    style={{
+      display: 'flex',
+      // Fills a stretched panel, and is ignored by one that is not a flex
+      // column — where the min-height is what keeps the mark off the top edge.
+      flex: '1 1 auto',
+      minHeight: '160px',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '12px',
+      pointerEvents: 'none',
+      opacity: 0,
+      animation:
+        `pz-overlay-loading-in ${OVERLAY_LOADING_FADE}ms linear ` +
+        `${delay}ms forwards`
+    }}
+  >
+    <style dangerouslySetInnerHTML={{ __html: OVERLAY_LOADING_CSS }} />
+    <span
+      {...partAttrs('loading-mark')}
+      style={{
+        width: '24px',
+        height: '24px',
+        borderRadius: '999px',
+        // `currentColor` so the mark inherits the panel's text colour: a
+        // designer who darkened the panel does not also have to restyle this.
+        border: '2px solid currentColor',
+        borderTopColor: 'transparent',
+        opacity: 0.45,
+        animation: 'pz-overlay-loading-spin 700ms linear infinite'
+      }}
+    />
+    {label ? (
+      <span
+        {...partAttrs('loading-text')}
+        style={{ fontSize: '13px', opacity: 0.7 }}
+      >
+        {label}
+      </span>
+    ) : null}
+  </div>
+);
+
+export default OverlayLoadingLayer;