button loading action return to view component
This commit is contained in:
		@@ -41,8 +41,7 @@
 | 
			
		||||
                    override="class"
 | 
			
		||||
                    data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                >
 | 
			
		||||
                    <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                    <span :class="[{'opacity-0': form.loading}]">{{ trans('general.send') }}</span>
 | 
			
		||||
                    <x-button-loading v-if="form.loading" text="{{ trans('general.send') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                </x-button>
 | 
			
		||||
            </div>
 | 
			
		||||
        </x-form>
 | 
			
		||||
 
 | 
			
		||||
@@ -70,10 +70,7 @@
 | 
			
		||||
                    override="class"
 | 
			
		||||
                    data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                >
 | 
			
		||||
                    <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> 
 | 
			
		||||
                    <span :class="[{'opacity-0': form.loading}]">
 | 
			
		||||
                        {{ trans('auth.login') }}
 | 
			
		||||
                    </span>
 | 
			
		||||
                    <x-button-loading v-if="form.loading" text="{{ trans('auth.login') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                </x-button>
 | 
			
		||||
            </div>
 | 
			
		||||
        </x-form>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,8 +58,7 @@
 | 
			
		||||
                    override="class"
 | 
			
		||||
                    data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                >
 | 
			
		||||
                <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                <span :class="[{'opacity-0': form.loading}]">{{ trans('auth.reset') }}</span>
 | 
			
		||||
                    <x-button-loading v-if="form.loading" text="{{ trans('auth.reset') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                </x-button>
 | 
			
		||||
            </div>
 | 
			
		||||
        </x-form>
 | 
			
		||||
 
 | 
			
		||||
@@ -264,8 +264,7 @@
 | 
			
		||||
                                    class="flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50"
 | 
			
		||||
                                    override="class"
 | 
			
		||||
                                >
 | 
			
		||||
                                    <i v-if="form.loading" class="material-icons animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                                    <span :class="[{'ml-0': form.loading}]">{{ trans('reconciliations.save_draft') }}</span>
 | 
			
		||||
                                    <x-button-loading v-if="form.loading" text="{{ trans('reconciliations.save_draft') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                                </x-button>
 | 
			
		||||
    
 | 
			
		||||
                                <div v-if="reconcile">
 | 
			
		||||
@@ -278,13 +277,7 @@
 | 
			
		||||
                                          @click="onReconcileSubmit"
 | 
			
		||||
                                          data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                                        >
 | 
			
		||||
                                          <i 
 | 
			
		||||
                                            v-if="form.loading"
 | 
			
		||||
                                            class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
 | 
			
		||||
                                          >
 | 
			
		||||
                                          </i>
 | 
			
		||||
 | 
			
		||||
                                          <span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
 | 
			
		||||
                                            <x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
 | 
			
		||||
                                        </x-button>
 | 
			
		||||
                                    </x-tooltip>
 | 
			
		||||
                                </div>
 | 
			
		||||
@@ -297,12 +290,7 @@
 | 
			
		||||
                                      @click="onReconcileSubmit"
 | 
			
		||||
                                      data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                                    >
 | 
			
		||||
                                    <i 
 | 
			
		||||
                                      v-if="form.loading"
 | 
			
		||||
                                      class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
 | 
			
		||||
                                    >
 | 
			
		||||
                                    </i>
 | 
			
		||||
                                    <span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
 | 
			
		||||
                                        <x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
 | 
			
		||||
                                    </x-button>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -203,8 +203,7 @@
 | 
			
		||||
                                class="relative flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50"
 | 
			
		||||
                                override="class"
 | 
			
		||||
                            >
 | 
			
		||||
                                <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                                <span :class="[{'ml-0': form.loading}]">{{ trans('general.save') }}</span>
 | 
			
		||||
                                <x-button-loading v-if="form.loading" text="{{ trans('general.save') }}" text-hide="[{'opacity-1': reconcile}]" />
 | 
			
		||||
                            </x-button>
 | 
			
		||||
                            <div v-if="reconcile">
 | 
			
		||||
                                <x-tooltip id="tooltip-reconcile" placement="top" message="{{ trans('reconciliations.irreconcilable') }}">
 | 
			
		||||
@@ -217,12 +216,7 @@
 | 
			
		||||
                                        data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                                    >
 | 
			
		||||
 | 
			
		||||
                                    <i 
 | 
			
		||||
                                        v-if="form.loading"
 | 
			
		||||
                                        class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
 | 
			
		||||
                                    >
 | 
			
		||||
                                    </i>
 | 
			
		||||
                                    <span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
 | 
			
		||||
                                        <x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
 | 
			
		||||
                                    </x-button>
 | 
			
		||||
                                </x-tooltip>
 | 
			
		||||
                            </div>
 | 
			
		||||
@@ -236,12 +230,7 @@
 | 
			
		||||
                                    data-loading-text="{{ trans('general.loading') }}"
 | 
			
		||||
                                >
 | 
			
		||||
 | 
			
		||||
                                    <i 
 | 
			
		||||
                                        v-if="form.loading"
 | 
			
		||||
                                        class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
 | 
			
		||||
                                    >
 | 
			
		||||
                                    </i>
 | 
			
		||||
                                    <span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
 | 
			
		||||
                                    <x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
 | 
			
		||||
                                </x-button>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -41,8 +41,7 @@
 | 
			
		||||
                    </button>
 | 
			
		||||
 | 
			
		||||
                    <button :disabled="form.loading"  type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="addTemplate">
 | 
			
		||||
                        <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                        <span :class="[{'opacity-0': form.loading}]">{{ trans('general.confirm') }}</span>
 | 
			
		||||
                        <x-button-loading v-if="form.loading" text="{{ trans('general.confirm') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                    </button>
 | 
			
		||||
                </div>
 | 
			
		||||
            </template>
 | 
			
		||||
 
 | 
			
		||||
@@ -47,10 +47,7 @@
 | 
			
		||||
                            ::disabled="form.loading"
 | 
			
		||||
                            override="class"
 | 
			
		||||
                        >
 | 
			
		||||
                            <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                            <span :class="[{'opacity-0': form.loading}]">
 | 
			
		||||
                                {{ trans('import.import') }}
 | 
			
		||||
                            </span>
 | 
			
		||||
                            <x-button-loading v-if="form.loading" text="{{ trans('import.import') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
                        </x-button>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										9
									
								
								resources/views/components/button-loading.blade.php
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								resources/views/components/button-loading.blade.php
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,9 @@
 | 
			
		||||
<i
 | 
			
		||||
  {{ $attributes }}
 | 
			
		||||
  class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"
 | 
			
		||||
>
 | 
			
		||||
</i>
 | 
			
		||||
 | 
			
		||||
<span :class="{{ $textHide }}">
 | 
			
		||||
  {!! $text !!}
 | 
			
		||||
</span> 
 | 
			
		||||
@@ -17,10 +17,7 @@
 | 
			
		||||
            ::disabled="form.loading"
 | 
			
		||||
            override="class"
 | 
			
		||||
        >
 | 
			
		||||
            <i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:-left-3.5 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:-right-3.5 after:rounded-full after:animate-submit after:delay-[0.42s]"></i>
 | 
			
		||||
            <span :class="[{'opacity-0': form.loading}]">
 | 
			
		||||
                {{ trans('general.save') }}
 | 
			
		||||
            </span>
 | 
			
		||||
            <x-button-loading v-if="form.loading" text="{{ trans('general.save') }}" text-hide="[{'opacity-0': form.loading}]" />
 | 
			
		||||
        </x-button>
 | 
			
		||||
    </div>
 | 
			
		||||
@stack('save_buttons_end')
 | 
			
		||||
 
 | 
			
		||||
@@ -21,10 +21,7 @@
 | 
			
		||||
            @click="onModuleLoadMore('releases')"
 | 
			
		||||
            class="w-48 bg-green m-auto block whitespace-nowrap px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white text-center js-learn-more js-button-modal-submit hover:bg-green-700 disabled:bg-green-300"
 | 
			
		||||
        >
 | 
			
		||||
            <i v-if="loadMoreLoading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
            <span :class="[{'opacity-0': loadMoreLoading}]">
 | 
			
		||||
                {{ trans('modules.see_more') }}
 | 
			
		||||
            </span>
 | 
			
		||||
            <x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
 | 
			
		||||
        </button>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -21,10 +21,7 @@
 | 
			
		||||
            @click="onModuleLoadMore('reviews')"
 | 
			
		||||
            class="w-48 bg-green m-auto block whitespace-nowrap px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white text-center js-learn-more js-button-modal-submit hover:bg-green-700 disabled:bg-green-300"
 | 
			
		||||
        >
 | 
			
		||||
            <i v-if="loadMoreLoading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
            <span :class="[{'opacity-0': loadMoreLoading}]">
 | 
			
		||||
                {{ trans('modules.see_more') }}
 | 
			
		||||
            </span>
 | 
			
		||||
            <x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
 | 
			
		||||
        </button>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -34,10 +34,7 @@
 | 
			
		||||
                    :disabled="loadMoreLoading"
 | 
			
		||||
                    class="w-48 m-auto relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 js-learn-more js-button-modal-submit"
 | 
			
		||||
                >
 | 
			
		||||
                    <i v-if="loadMoreLoading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
 | 
			
		||||
                    <span :class="[{'opacity-0': loadMoreLoading}]">
 | 
			
		||||
                        {{ trans('modules.see_more') }}
 | 
			
		||||
                    </span>
 | 
			
		||||
                    <x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
 | 
			
		||||
                </button>
 | 
			
		||||
 | 
			
		||||
                <x-form.input.hidden name="see_more_path" value="{{ route('apps.load-more', ['type' => $type]) }}" />
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user