diff --git a/app/View/Components/Loading/Absolute.php b/app/View/Components/Loading/Absolute.php
new file mode 100644
index 000000000..f68abe0c9
--- /dev/null
+++ b/app/View/Components/Loading/Absolute.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\View\Components\Loading;
+
+use App\Abstracts\View\Component;
+
+class Absolute extends Component
+{
+    public $hidden;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        bool $hidden = false,
+       
+    ) {
+        $this->hidden = $hidden;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.loading.absolute');
+    }
+}
\ No newline at end of file
diff --git a/app/View/Components/Loading/Content.php b/app/View/Components/Loading/Content.php
new file mode 100644
index 000000000..440072ae6
--- /dev/null
+++ b/app/View/Components/Loading/Content.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\View\Components\Loading;
+
+use App\Abstracts\View\Component;
+
+class Content extends Component
+{
+    public $hidden;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        bool $hidden = false,
+       
+    ) {
+        $this->hidden = $hidden;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.loading.content');
+    }
+}
\ No newline at end of file
diff --git a/resources/views/components/loading/absolute.blade.php b/resources/views/components/loading/absolute.blade.php
index 9d473dcbb..574e40c54 100644
--- a/resources/views/components/loading/absolute.blade.php
+++ b/resources/views/components/loading/absolute.blade.php
@@ -1,4 +1,6 @@
-<div data-absolute-loading-content class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50">
-  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
-</div>
+@if (! $hidden)
+  <div data-absolute-loading-content class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50">
+    <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
+  </div>
+@endif
 <!--data attr added because for none vue.js pages-->
\ No newline at end of file
diff --git a/resources/views/components/loading/content.blade.php b/resources/views/components/loading/content.blade.php
index 0d290e0e2..8f9c0874a 100644
--- a/resources/views/components/loading/content.blade.php
+++ b/resources/views/components/loading/content.blade.php
@@ -1,4 +1,6 @@
-<div data-loading-content class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50">
-  <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
-</div>
+@if (! $hidden)
+  <div data-loading-content class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50">
+    <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
+  </div>
+@endif
 <!--data attr added because for none vue.js pages-->