From aa1b17935db27b6cb805867eb65a4509988a386d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:08:15 +0300
Subject: [PATCH] Public sayfalardaki Loading

---
 ui/src/components/orders/ProductCatalog.tsx | 28 +++++++++++++++------
 ui/src/views/public/About.tsx               | 14 ++++++++---
 ui/src/views/public/Blog.tsx                |  4 +--
 ui/src/views/public/BlogDetail.tsx          |  6 +++--
 ui/src/views/public/Contact.tsx             | 10 ++++++++
 ui/src/views/public/Services.tsx            | 10 ++++++++
 6 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/orders/ProductCatalog.tsx b/ui/src/components/orders/ProductCatalog.tsx
index b19d1427..4f98df00 100644
--- a/ui/src/components/orders/ProductCatalog.tsx
+++ b/ui/src/components/orders/ProductCatalog.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useMemo, useEffect } from 'react'
-import { FaFilter, FaSearch } from 'react-icons/fa';
+import { FaFilter, FaSearch } from 'react-icons/fa'
 import { ProductCard } from './ProductCard'
 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 { useLocalization } from '@/utils/hooks/useLocalization'
 
 interface ProductCatalogProps {
   searchQuery: string
@@ -90,7 +90,9 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40">
           <div className="flex items-center space-x-2 mb-4">
             <FaFilter className="w-5 h-5 text-gray-600" />
-            <h3 className="font-semibold text-gray-900">{translate('::Public.products.categories')}</h3>
+            <h3 className="font-semibold text-gray-900">
+              {translate('::Public.products.categories')}
+            </h3>
           </div>
           <div className="space-y-2">
             {categories.map((category) => (
@@ -103,7 +105,11 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                     : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                 }`}
               >
-                <span>{category === 'all' ? translate('::Public.products.categories.all') : translate('::' + category)}</span>
+                <span>
+                  {category === 'all'
+                    ? translate('::Public.products.categories.all')
+                    : translate('::' + category)}
+                </span>
                 <span
                   className={`text-xs px-2 py-1 rounded-full ${
                     selectedCategory === category
@@ -121,7 +127,9 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
           <div className="mt-6">
             <div className="flex items-center space-x-2 mb-3">
               <FaSearch className="w-5 h-5 text-gray-600" />
-              <h3 className="font-semibold text-gray-900">{translate('::Public.products.search.title')}</h3>
+              <h3 className="font-semibold text-gray-900">
+                {translate('::Public.products.search.title')}
+              </h3>
             </div>
             <div className="relative">
               <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -139,7 +147,11 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
 
       <main className="flex-1">
         {loading ? (
-          <div className="text-center py-12 text-gray-500">{translate('::Public.products.loading')}</div>
+          <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>
+            </div>
+          </div>
         ) : (
           <>
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
@@ -159,7 +171,9 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
                 <div className="text-gray-400 mb-2">
                   <FaFilter className="w-12 h-12 mx-auto" />
                 </div>
-                <h3 className="text-lg font-medium text-gray-900 mb-2">{translate('::Public.products.empty.title')}</h3>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  {translate('::Public.products.empty.title')}
+                </h3>
                 <p className="text-gray-600">{translate('::Public.products.empty.description')}</p>
               </div>
             )}
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index 23d53c73..5075788d 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
 import navigationIcon from '@/configs/navigation-icon.config'
 import { AboutDto } from '@/proxy/about/models'
 import { getAbout } from '@/services/about'
+import { useLocalization } from '@/utils/hooks/useLocalization'
 
 const About: React.FC = () => {
   const { translate } = useLocalization()
@@ -25,7 +25,6 @@ const About: React.FC = () => {
 
   useEffect(() => {
     setLoading(true)
-
     const fetchServices = async () => {
       try {
         const result = await getAbout()
@@ -36,10 +35,19 @@ const About: React.FC = () => {
         setLoading(false)
       }
     }
-
     fetchServices()
   }, [])
 
+  if (loading) {
+    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>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <>
       <Helmet
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index 6aaaae4d..cd957051 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -67,9 +67,9 @@ const Blog = () => {
 
   if (loading && posts.length === 0) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center">
-          <p className="mt-4 text-gray-600">Blog yazıları yükleniyor...</p>
+          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
         </div>
       </div>
     )
diff --git a/ui/src/views/public/BlogDetail.tsx b/ui/src/views/public/BlogDetail.tsx
index 46c590ae..e1c52245 100644
--- a/ui/src/views/public/BlogDetail.tsx
+++ b/ui/src/views/public/BlogDetail.tsx
@@ -57,8 +57,10 @@ const BlogDetail: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <h1 className="text-2xl font-bold text-gray-900">Loading...</h1>
+      <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>
+        </div>
       </div>
     )
   }
diff --git a/ui/src/views/public/Contact.tsx b/ui/src/views/public/Contact.tsx
index 29a8b1f2..6b014d5a 100644
--- a/ui/src/views/public/Contact.tsx
+++ b/ui/src/views/public/Contact.tsx
@@ -37,6 +37,16 @@ const Contact: React.FC = () => {
     fetchServices()
   }, [])
 
+  if (loading) {
+    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>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
       <Helmet
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index 2bc30919..ba921a0e 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -59,6 +59,16 @@ const Services: React.FC = () => {
     fetchServices()
   }, [])
 
+  if (loading) {
+    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>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
       <Helmet