Pre luanch plan phase 1 complete

frontend/src/pages/Reference/Industries.tsx

@@ -7,6 +7,7 @@ import Badge from '../../components/ui/badge/Badge';
 import PageHeader from '../../components/common/PageHeader';
 import { PieChartIcon } from '../../icons';
 import { Tooltip } from '../../components/ui/tooltip/Tooltip';
+import { usePageLoading } from '../../context/PageLoadingContext';
 
 interface IndustryWithData extends Industry {
   keywordsCount: number;
@@ -26,8 +27,8 @@ const formatVolume = (volume: number): string => {
 
 export default function Industries() {
   const toast = useToast();
+  const { startLoading, stopLoading } = usePageLoading();
   const [industries, setIndustries] = useState<IndustryWithData[]>([]);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     loadIndustries();
@@ -35,7 +36,7 @@ export default function Industries() {
 
   const loadIndustries = async () => {
     try {
-      setLoading(true);
+      startLoading('Loading industries...');
       const response = await fetchIndustries();
       const industriesList = response.industries || [];
       
@@ -86,7 +87,7 @@ export default function Industries() {
     } catch (error: any) {
       toast.error(`Failed to load industries: ${error.message}`);
     } finally {
-      setLoading(false);
+      stopLoading();
     }
   };
 
@@ -98,25 +99,19 @@ export default function Industries() {
         badge={{ icon: <PieChartIcon />, color: 'blue' }}
         hideSiteSector={true}
       />
-      <div className="p-6">
-        <div className="mb-6">
-          <p className="text-gray-600 dark:text-gray-400">
-            Explore our comprehensive global database of industries, sectors, and high-volume keywords
-          </p>
-        </div>
+      <div className="mb-6">
+        <p className="text-gray-600 dark:text-gray-400">
+          Explore our comprehensive global database of industries, sectors, and high-volume keywords
+        </p>
+      </div>
 
-        {loading ? (
-          <div className="flex items-center justify-center h-64">
-            <div className="text-gray-500">Loading industries...</div>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {industries.map((industry) => (
-              <Card 
-                key={industry.slug} 
-                className="p-4 hover:shadow-lg transition-shadow duration-200 border border-gray-200 dark:border-gray-700"
-              >
-                {/* Header */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {industries.map((industry) => (
+            <Card 
+              key={industry.slug} 
+              className="p-4 hover:shadow-lg transition-shadow duration-200 border border-gray-200 dark:border-gray-700"
+            >
+              {/* Header */}
                 <div className="flex justify-between items-start mb-3">
                   <h3 className="text-base font-bold text-gray-900 dark:text-white leading-tight">
                     {industry.name}
@@ -183,8 +178,6 @@ export default function Industries() {
                 )}
               </Card>
             ))}
-          </div>
-        )}
       </div>
     </>
   );

frontend/src/pages/Reference/SeedKeywords.tsx

@@ -4,12 +4,13 @@ import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchSeedKeywords, SeedKeyword, fetchIndustries, Industry } from '../../services/api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
+import { usePageLoading } from '../../context/PageLoadingContext';
 
 export default function SeedKeywords() {
   const toast = useToast();
+  const { startLoading, stopLoading } = usePageLoading();
   const [keywords, setKeywords] = useState<SeedKeyword[]>([]);
   const [industries, setIndustries] = useState<Industry[]>([]);
-  const [loading, setLoading] = useState(true);
   const [selectedIndustry, setSelectedIndustry] = useState<number | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
 
@@ -29,7 +30,7 @@ export default function SeedKeywords() {
 
   const loadKeywords = async () => {
     try {
-      setLoading(true);
+      startLoading('Loading seed keywords...');
       const response = await fetchSeedKeywords({
         industry: selectedIndustry || undefined,
         search: searchTerm || undefined,
@@ -38,12 +39,12 @@ export default function SeedKeywords() {
     } catch (error: any) {
       toast.error(`Failed to load seed keywords: ${error.message}`);
     } finally {
-      setLoading(false);
+      stopLoading();
     }
   };
 
   return (
-    <div className="p-6">
+    <>
       <PageMeta title="Seed Keywords" />
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Seed Keywords</h1>
@@ -72,32 +73,27 @@ export default function SeedKeywords() {
         />
       </div>
 
-      {loading ? (
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading...</div>
-        </div>
-      ) : (
-        <Card className="p-6">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-gray-200 dark:border-gray-700">
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Keyword</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Industry</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Sector</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Volume</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Difficulty</th>
-                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Country</th>
-                </tr>
-              </thead>
-              <tbody>
-                {keywords.map((keyword) => (
-                  <tr key={keyword.id} className="border-b border-gray-100 dark:border-gray-800">
-                    <td className="py-3 px-4 text-sm font-medium text-gray-900 dark:text-white">
-                      {keyword.keyword}
-                    </td>
-                    <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
-                      {keyword.industry_name}
+      <Card className="p-6">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-gray-200 dark:border-gray-700">
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Keyword</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Industry</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Sector</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Volume</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Difficulty</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Country</th>
+              </tr>
+            </thead>
+            <tbody>
+              {keywords.map((keyword) => (
+                <tr key={keyword.id} className="border-b border-gray-100 dark:border-gray-800">
+                  <td className="py-3 px-4 text-sm font-medium text-gray-900 dark:text-white">
+                    {keyword.keyword}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {keyword.industry_name}
                     </td>
                     <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
                       {keyword.sector_name}
@@ -118,7 +114,7 @@ export default function SeedKeywords() {
           </div>
         </Card>
       )}
-    </div>
+    </>
   );
 }