PHPackages                             mobikul/mobikul\_loader - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mobikul/mobikul\_loader

ActiveNativephp-plugin[Utility & Helpers](/categories/utility)

mobikul/mobikul\_loader
=======================

Loader state bridge for NativePHP Mobile with optional Blade and web view helpers

v1.0.2(2mo ago)030MITPHPPHP ^8.2

Since May 6Pushed 2mo agoCompare

[ Source](https://github.com/SocialMobikul/Mobikul_Loader_Native_Php)[ Packagist](https://packagist.org/packages/mobikul/mobikul_loader)[ RSS](/packages/mobikul-mobikul-loader/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (2)Versions (4)Used By (0)

Mobikul Loader for NativePHP Mobile
===================================

[](#mobikul-loader-for-nativephp-mobile)

Show and hide loader state in NativePHP Mobile apps, with optional Blade and web view support.

To find out more, visit:

What this plugin does
---------------------

[](#what-this-plugin-does)

`mobikul_loader` provides two NativePHP bridge methods:

- `MobikulLoader.Show`
- `MobikulLoader.Hide`

These methods return loader state that your app can use while processing actions such as login, sync, or API requests.

The package also includes an optional HTML, CSS, and JavaScript helper for Blade-based screens or hybrid web views where you want a ready-made overlay spinner.

Requirements
------------

[](#requirements)

- PHP `8.2` or higher
- Laravel support package compatibility: `^10.0`, `^11.0`, `^12.0`, or `^13`
- `nativephp/mobile` `^3.0`
- A NativePHP Mobile application

Installation
------------

[](#installation)

Install the package:

```
composer require mobikul/mobikul_loader
```

Register the plugin with NativePHP:

```
php artisan native:plugin:register mobikul/mobikul_loader
```

If this is your first time installing the plugin, or if you later change native bridge files, rebuild the native layer:

```
php artisan native:install --force
```

If you install from the NativePHP marketplace, configure the NativePHP Composer repository and credentials first:

```
composer config repositories.nativephp-plugins composer https://plugins.nativephp.com
composer config http-basic.plugins.nativephp.com
composer require mobikul/mobikul_loader
php artisan native:plugin:register mobikul/mobikul_loader
```

Optional Asset Publishing
-------------------------

[](#optional-asset-publishing)

If you want to use the included Blade or web view loader UI, publish the package assets:

```
php artisan vendor:publish --tag=mobikul-loader-assets
```

This publishes the loader files to:

```
public/vendor/mobikul_loader/

```

Quick Start
-----------

[](#quick-start)

Example login flow using the bridge methods from a NativePHP web view:

```
async function signIn() {
  await fetch('/_native/api/call', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      method: 'MobikulLoader.Show',
      params: { message: 'Signing you in...' }
    })
  });

  try {
    await fakeLoginRequest();
  } finally {
    await fetch('/_native/api/call', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        method: 'MobikulLoader.Hide',
        params: {}
      })
    });
  }
}
```

JavaScript Usage
----------------

[](#javascript-usage)

You can call the bridge endpoint directly:

```
await fetch('/_native/api/call', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    method: 'MobikulLoader.Show',
    params: { message: 'Loading...' }
  })
});
```

Or use the included helper module from [mobikulLoader.js](/Users/aman/Documents/Native/plugins/mobikul_loader/resources/js/mobikulLoader.js):

```
import { show, hide } from './vendor/mobikul_loader/js/mobikulLoader.js';

await show({ message: 'Loading...' });
await hide();
```

The helper is intended for bundled frontend code in your app. The import path above is an example and may need to be adjusted to match your app's frontend build setup. If you are not using a bundler, call the bridge endpoint directly.

Bridge Methods
--------------

[](#bridge-methods)

### `MobikulLoader.Show`

[](#mobikulloadershow)

Marks the loader as visible and returns the resolved loader state.

Parameters:

- `message` optional string shown in the response payload

Returns:

```
{
  "visible": true,
  "message": "Loading..."
}
```

### `MobikulLoader.Hide`

[](#mobikulloaderhide)

Marks the loader as hidden and returns the resolved loader state.

Returns:

```
{
  "visible": false
}
```

Blade and Web View Helper
-------------------------

[](#blade-and-web-view-helper)

If your NativePHP app renders Blade or hybrid web views, you can use the included helper to render a loader overlay after publishing assets:

```