useLoading

Loading overlay management using Element Plus ElLoading service.

Purpose

Provides a simple wrapper around Element Plus loading service with sensible defaults.

Signature

export function useLoading(): {
  showLoading: (options?: ElLoadingOptions) => ElLoadingInstance;
}

Usage Pattern

// Example: plugs/composables/useLoading.ts
import { useLoading } from "plugs/composables";

const { showLoading } = useLoading();

// Basic usage with defaults
const loading = showLoading();

// Custom options
const loading = showLoading({
  lock: true,
  text: "Processing...",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.5)",
});

Default Options

{
  lock: true,
  text: "Loading",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.3)",
}

Dependencies

element-plus - ElLoading

Note

This is a thin wrapper. For complex loading states, consider managing loading state manually with ref<boolean> and conditional rendering.

1.0 KiB Raw Blame History