diff --git a/ui/src/components/componentEditor/ComponentPreview.tsx b/ui/src/components/componentEditor/ComponentPreview.tsx
index 52866425..85facdad 100644
--- a/ui/src/components/componentEditor/ComponentPreview.tsx
+++ b/ui/src/components/componentEditor/ComponentPreview.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import DynamicRenderer from './DynamicRenderer'
 import { useComponents } from '@/contexts/ComponentContext'
+import { Loading } from '../shared'
 
 export interface ComponentPreviewProps {
   componentName?: string
@@ -19,7 +20,7 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, clas
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={true} />
         </div>
       </div>
     )
diff --git a/ui/src/components/componentEditor/DynamicRenderer.tsx b/ui/src/components/componentEditor/DynamicRenderer.tsx
index a29f6fb3..e56272eb 100644
--- a/ui/src/components/componentEditor/DynamicRenderer.tsx
+++ b/ui/src/components/componentEditor/DynamicRenderer.tsx
@@ -4,6 +4,7 @@ import axios from 'axios'
 import { useComponents } from '../../contexts/ComponentContext'
 import ErrorBoundary from './ErrorBoundary'
 import { toast } from '../ui'
+import { Loading } from '../shared'
 
 const compileComponent = (code: string, scope: Record<string, any> = {}) => {
   const transpiled = Babel.transform(code, {
@@ -194,7 +195,7 @@ const DynamicRenderer: React.FC<DynamicRendererProps> = ({
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={!Component} />
         </div>
       </div>
     )
diff --git a/ui/src/components/developerKit/ComponentManager.tsx b/ui/src/components/developerKit/ComponentManager.tsx
index 9d9edbbd..9b0fbabf 100644
--- a/ui/src/components/developerKit/ComponentManager.tsx
+++ b/ui/src/components/developerKit/ComponentManager.tsx
@@ -16,6 +16,7 @@ import {
 } from 'react-icons/fa'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Loading } from '../shared'
 
 const ComponentManager: React.FC = () => {
   const { components, loading, updateComponent, deleteComponent } = useComponents()
@@ -157,7 +158,7 @@ const ComponentManager: React.FC = () => {
       {loading ? (
         <div className="flex items-center justify-center min-h-screen bg-gray-50">
           <div className="text-center">
-            <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+            <Loading loading={loading} />
           </div>
         </div>
       ) : filteredComponents?.length > 0 ? (
diff --git a/ui/src/components/orders/ProductCatalog.tsx b/ui/src/components/orders/ProductCatalog.tsx
index 4c9bab8d..0eae8f6c 100644
--- a/ui/src/components/orders/ProductCatalog.tsx
+++ b/ui/src/components/orders/ProductCatalog.tsx
@@ -5,6 +5,7 @@ import { addItemToCart, CartState } from '@/utils/cartUtils'
 import { BillingCycle, ProductDto } from '@/proxy/order/models'
 import { OrderService } from '@/services/order.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Loading } from '../shared'
 
 interface ProductCatalogProps {
   searchQuery: string
@@ -149,7 +150,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
         {loading ? (
           <div className="flex items-center justify-center min-h-screen bg-gray-50">
             <div className="text-center">
-              <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+              <Loading loading={loading} />
             </div>
           </div>
         ) : (
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index 5075788d..373ca47e 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -4,6 +4,7 @@ import navigationIcon from '@/configs/navigation-icon.config'
 import { AboutDto } from '@/proxy/about/models'
 import { getAbout } from '@/services/about'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import Loading from '@/components/shared/Loading'
 
 const About: React.FC = () => {
   const { translate } = useLocalization()
@@ -42,7 +43,7 @@ const About: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={loading} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index 125f6462..30ea364e 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -6,6 +6,7 @@ import { BlogCategory, BlogPost } from '@/proxy/blog/blog'
 import { blogService } from '@/services/blog.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
+import { Loading } from '@/components/shared'
 
 const Blog = () => {
   const { translate } = useLocalization()
@@ -66,7 +67,7 @@ const Blog = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={loading} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/BlogDetail.tsx b/ui/src/views/public/BlogDetail.tsx
index 82f413bd..b109e580 100644
--- a/ui/src/views/public/BlogDetail.tsx
+++ b/ui/src/views/public/BlogDetail.tsx
@@ -7,6 +7,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { Helmet } from 'react-helmet'
+import { Loading } from '@/components/shared'
 
 interface PostData {
   image?: string
@@ -56,7 +57,7 @@ const BlogDetail: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={loading} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/Contact.tsx b/ui/src/views/public/Contact.tsx
index 6c84309b..5bb43216 100644
--- a/ui/src/views/public/Contact.tsx
+++ b/ui/src/views/public/Contact.tsx
@@ -13,6 +13,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
 import { ContactDto } from '@/proxy/contact/models'
 import { getContact } from '@/services/contact'
+import { Loading } from '@/components/shared'
 
 const Contact: React.FC = () => {
   const { translate } = useLocalization()
@@ -41,7 +42,7 @@ const Contact: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={loading} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/Payment.tsx b/ui/src/views/public/Payment.tsx
index 0cb74520..0f2b8ea8 100644
--- a/ui/src/views/public/Payment.tsx
+++ b/ui/src/views/public/Payment.tsx
@@ -1,5 +1,6 @@
 import { Cart } from '@/components/orders/Cart'
 import { PaymentForm } from '@/components/orders/PaymentForm'
+import { Loading } from '@/components/shared'
 import { CustomTenantDto } from '@/proxy/config/models'
 import { OrderDto } from '@/proxy/order/models'
 import { ROUTES_ENUM } from '@/routes/route.constant'
@@ -111,7 +112,7 @@ const Payment: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={!tenant} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index ba921a0e..62ee4a6f 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -15,6 +15,7 @@ import { Helmet } from 'react-helmet'
 import { ServiceDto } from '@/proxy/services/models'
 import { getServices } from '@/services/service.service'
 import navigationIcon from '@/configs/navigation-icon.config'
+import { Loading } from '@/components/shared'
 
 const Services: React.FC = () => {
   const { translate } = useLocalization()
@@ -63,7 +64,7 @@ const Services: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={loading} />
         </div>
       </div>
     )
diff --git a/ui/src/views/public/Success.tsx b/ui/src/views/public/Success.tsx
index 12721dcd..15ae02c7 100644
--- a/ui/src/views/public/Success.tsx
+++ b/ui/src/views/public/Success.tsx
@@ -1,4 +1,5 @@
 import { OrderSuccess } from '@/components/orders/OrderSuccess'
+import { Loading } from '@/components/shared'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import React, { useState, useEffect } from 'react'
@@ -30,7 +31,7 @@ const Success: React.FC = () => {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
+          <Loading loading={!orderId} />
         </div>
       </div>
     )