Add loading image after click the `register` button in Laravel 8-CodePudding

I am new in Laravel and using Laravel version 8 now.

There is form submit in register page.

When user fills out their info and clicks the register button, another app is deployed to new server. so deploy api is called after clicking resgister button.

As you know, there are some times to deploy to new server after clicking button. So in this case, I'd like to add loading image.

Here are some parts of code.

@extends('layouts.central')

@section('content')

<div>
    <div >
        <div >
            <form action="{{ route('central.tenants.register.submit') }}" method="POST">

                <div >
                    <label for="name" >
                        Full name
                    </label>
                </div>

                <div >
                    <label for="domain" >
                        Domain
                    </label>
                </div>

                <div >
                    <label for="email" >
                        Email address
                    </label>
                </div>

                <div >
                    <label for="password" >
                        Password
                    </label>
                </div>

                <div >
                    <label for="password_confirmation" >
                        Confirm Password
                    </label>
                </div>

                <div >
                    <span >
                        <button type="submit" >
                            Register
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

This is RegisterController.php

<?php

namespace App\Http\Controllers\Central;

use App\Actions\CreateTenantAction;
use App\Http\Controllers\Controller;
use App\Models\Tenant;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    public function show()
    {
        return view('central.register');
    } 

    public function submit(Request $request)
    {
        $data = $this->validate($request, [
            'domain' => 'required|string|unique:domains',
            'company' => 'required|string|max:255',
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255|unique:tenants',
            'password' => 'required|string|confirmed|max:255',
        ]);

       ....

        here are api calls for deploying to new server

        $data['password'] = bcrypt($data['password']);
        $tenant = (new CreateTenantAction)($data, $data['domain']);


        return redirect()->away("http://{$siteDomain}");
    }
}

In this case, where do i have to add loading section? Don't need to add any code in controller.php ?

Could you make or add the correct answer in my code? Thanks a lot and appreciate.

CodePudding user response：

Add this to any of your root css files or header style of root layout:

CSS

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.75) url("/your_loading_image.gif") no-repeat center center;
    z-index: 99999;
}

add this div to any of your root layout like app layout or master layout:

html

<div id='loader'></div>

Then in your register page, add jquery code script to the bottom:

script

<script>
$(function() {
    $( "form" ).submit(function() {
        $('#loader').show();
    });
});
</script>