Loader

php artisan martis:vendor-publish --config

'loader' => [
    // Custom loading text. null = use the locale default ("Loading...")
    'message' => null,
 
    // Phosphor icon name to replace the spinner (e.g. 'spinner-gap', 'circle-notch')
    // When set, the named icon spins instead of the default SpinnerGap.
    'icon' => null,
 
    // URL to a logo/image shown instead of the spinner, scaled to fit
    // its square. Takes precedence over 'icon'.
    'logo' => env('MARTIS_LOADER_LOGO'),
 
    // Dark theme variant of 'logo' (v2.6.0). If only one of the pair is
    // set, it serves both themes.
    'logoDark' => env('MARTIS_LOADER_LOGO_DARK'),
 
    // CSS color for the spinner. Default: var(--martis-accent) — your theme's accent color.
    'spinnerColor' => null,
 
    // Overlay background opacity (0.0–1.0). Default: 0.6.
    'overlayOpacity' => null,
 
    // CSS color for overlay background. Default: var(--martis-bg).
    'overlayColor' => null,
 
    // Set to true to disable all loaders globally.
    'disabled' => false,
 
    // Granular opt-out per context.
    'disableOn' => [
        'table'      => false,  // disable overlay on index table refetch
        'search'     => false,  // disable loader during search
        'detail'     => false,  // disable loader on resource detail pages
        'components' => false,  // disable in other component contexts
                                // (Profile, ActionDrawer, ToolPage, CacheAdmin, ResourceLens)
    ],
],

'loader' => [
    'message'      => 'Please wait...',
    'spinnerColor' => '#6366f1',
],

'loader' => [
    'logo'    => '/images/logo.svg',
    'message' => null,  // hide message when using logo
],

MARTIS_LOADER_LOGO=/brand/mark-light.svg
MARTIS_LOADER_LOGO_DARK=/brand/mark-dark.svg

'loader' => [
    'icon'    => 'circle-notch',
    'message' => 'Fetching...',
],

'loader' => [
    'overlayOpacity' => 0.4,
    'overlayColor'   => '#0f172a',
],

'loader' => [
    'disabled' => true,
],

'loader' => [
    'disableOn' => [
        'table' => true,
    ],
],

import { componentRegistry } from '@martis/runtime'
import { MyLoader } from './MyLoader'
 
// Replace the global loader with your custom component. Every Martis
// page, and every `MartisLoader` an extension renders from
// `@martis/runtime`, routes through this override.
componentRegistry.register('loader', MyLoader)

interface MartisLoaderProps {
  /** Whether the loader is visible */
  loading?: boolean
  /** Override config message */
  message?: string | null
  /** Overlay mode: covers parent container with semi-transparent overlay */
  overlay?: boolean
  /** Disable this specific loader (per-context opt-out) */
  disabled?: boolean
  /** Size variant */
  size?: 'sm' | 'md' | 'lg'
  /** Children to render under the loader overlay (overlay mode only) */
  children?: React.ReactNode
  /**
   * Context identifier used to check `loader.disableOn` config.
   * Supported: "table" | "search" | "detail" | "components".
   * Pages pass this so a single config flag can opt one surface out
   * without having to thread `disabled={...}` everywhere.
   */
  context?: 'table' | 'search' | 'detail' | 'components'
  /**
   * Per-instance config override. Merged on top of the global
   * `config.loader` for this one render. The wrapper passes the
   * active resource's `Resource::loaderConfig()` here automatically;
   * call sites can also pass an inline override to win over both
   * global config and the resource override.
   */
  configOverride?: Partial<MartisLoaderConfig>
}

// resources/js/martis-extensions/MyLoader.tsx
import type { MartisLoaderProps } from '@martis/runtime'
 
export function MyLoader({ loading, size, overlay, children }: MartisLoaderProps) {
  if (!loading) return overlay ? <>{children}</> : null
 
  const spinner = (
    <div className="flex items-center gap-2 text-indigo-500">
      <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24" fill="none">
        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
        <path className="opacity-75" fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
      </svg>
      <span className="text-sm text-muted-foreground">Loading...</span>
    </div>
  )
 
  if (overlay) {
    return (
      <div className="relative">
        {children}
        <div className="absolute inset-0 flex items-center justify-center bg-background/60 rounded-lg z-10">
          {spinner}
        </div>
      </div>
    )
  }
 
  return spinner
}

namespace App\Martis\Resources;
 
use Martis\Resource;
 
class AuditLog extends Resource
{
    public static function loaderConfig(): array
    {
        return [
            'message' => 'Calibrating audit log…',
            'spinnerColor' => '#FF6347',
            'disableOn' => [
                'detail' => true,        // skip the detail-page loader
            ],
        ];
    }
 
    // …model(), fields(), etc.
}

loader: {!! json_encode(config('martis.loader', ['disabled' => false])) !!},

# Publish only the config file
php artisan martis:vendor-publish --config
 
# Force overwrite if already published
php artisan martis:vendor-publish --config --force

# Publish language files
php artisan martis:vendor-publish --lang

// lang/vendor/martis/en/messages.php
return [
    'loading' => 'Fetching data...',
    // ...
];

http://your-app.test/martis/resources/posts

use Illuminate\Database\Eloquent\Builder;
use Illuminate\Http\Request;
 
public static function indexQuery(Request $request, Builder $query): Builder
{
    sleep(2); // simulate slow response — remove after testing
    return parent::indexQuery($request, $query);
}