Optimize app loading and fix product lines in experiments

Performance improvements:
- Fetch traffic, stock, vendor stock, buybox, and experiments data in parallel using Promise.all
- Reduces initial loading time significantly
- Non-blocking background fetches after sales data loads

Bug fixes:
- Pass availableLines from App.tsx to ExperimentForm as prop
- Remove localStorage dependency for product lines
- Product lines now correctly populated from rawData

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

App.tsx

@@ -66,6 +66,12 @@ const App: React.FC = () => {
   const [preselectedAsins, setPreselectedAsins] = useState<string[]>([]);
   const [preselectedMarketplace, setPreselectedMarketplace] = useState<string>('');
   const [preselectedLine, setPreselectedLine] = useState<string>('');
+  
+  // Available product lines (for experiment form)
+  const availableProductLines = useMemo(() => {
+    const lines = new Set(rawData.map(r => r.line).filter(Boolean));
+    return Array.from(lines).sort();
+  }, [rawData]);
 
   // Modal State
   const [isDataModalOpen, setIsDataModalOpen] = useState(false);
@@ -400,19 +406,14 @@ const App: React.FC = () => {
         handleAdsFetch();
       }
 
-      // 1c. Always fetch Traffic data (no caching for now)
-      console.log("Fetching Traffic data...");
-      handleTrafficFetch();
-
-      // 1d. Always fetch Stock data
-      console.log("Fetching Stock data...");
-      handleStockFetch();
-      handleVendorStockFetch();
-      handleBuyBoxFetch();
-
-      // 1e. Fetch Experiments data
-      console.log("Fetching Experiments data...");
-      handleExperimentsFetch();
+      // 1c-1f. Fetch other data in parallel (non-blocking)
+      Promise.all([
+        handleTrafficFetch(),
+        handleStockFetch(),
+        handleVendorStockFetch(),
+        handleBuyBoxFetch(),
+        handleExperimentsFetch()
+      ]).catch(e => console.warn("Background fetch failed", e));
 
       // 1f. Fetch Forecast data
       handleForecastFetch(cachedData || [], cachedData || [], filters);
@@ -1051,6 +1052,7 @@ const App: React.FC = () => {
           initialAsins={preselectedAsins}
           initialMarketplace={preselectedMarketplace}
           initialLine={preselectedLine}
+          availableLines={availableProductLines}
         />
       )}
 

components/ExperimentForm.tsx

@@ -8,6 +8,7 @@ interface ExperimentFormProps {
   initialAsins?: string[];
   initialMarketplace?: string;
   initialLine?: string;
+  availableLines?: string[];
 }
 
 const ExperimentForm: React.FC<ExperimentFormProps> = ({
@@ -15,7 +16,8 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
   onSuccess,
   initialAsins = [],
   initialMarketplace = 'DE',
-  initialLine = ''
+  initialLine = '',
+  availableLines = []
 }) => {
   const [formData, setFormData] = useState<ExperimentCreateInput>({
     name: '',
@@ -36,21 +38,6 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
   const [targetType, setTargetType] = useState<'asin' | 'line'>(initialAsins.length > 0 ? 'asin' : initialLine ? 'line' : 'asin');
   const [selectedLine, setSelectedLine] = useState(initialLine);
 
-  // Get available product lines from localStorage (sales data)
-  const availableLines = useMemo(() => {
-    try {
-      const cachedData = localStorage.getItem('craze_sales_data');
-      if (cachedData) {
-        const data = JSON.parse(cachedData);
-        const lines = new Set(data.map((r: any) => r.line).filter(Boolean));
-        return Array.from(lines).sort();
-      }
-    } catch (e) {
-      console.error('Failed to load product lines:', e);
-    }
-    return [];
-  }, []);
-
   const handleAddAsin = () => {
     // Support both comma and space separated ASINs
     const newAsins = asinInput