add conditional component

src/shared/components/ConditionalComponent.tsx

+import { Fragment } from "react";
+
+type PropsType = {
+    isValid: boolean;
+    defaultComponent?: React.ReactNode | JSX.Element;
+    children: React.ReactNode | JSX.Element;
+}
+export default function ConditionalComponent({ isValid, defaultComponent, children }: PropsType): JSX.Element {
+    return (
+        <Fragment>
+            {isValid ? children : defaultComponent || null}
+        </Fragment>
+    )
+}
\ No newline at end of file

src/shared/sections/order/view/order-list-view.tsx

@@ -26,6 +26,7 @@ import { Alert, CircularProgress, Grid, Snackbar, TableCell, TableRow } from "@m
 import { exportOrders, exportOrdersProducts, updateOrderStatus, useDeleteOrder, useDeleteOrderList, useOrderStatusCounts, useSearchOrders } from "@/shared/api/main-order";
 import { OrderStatus, orderStatusLabels, OrderStatusList, OrderWithClientDetails, } from "@/contexts/types/main-order";
 import { getlastOrderHistory } from "@/shared/api/order";
+import ConditionalComponent from "@/shared/components/ConditionalComponent";
 
 interface IOrderStatusOption {
   value: string;
@@ -426,38 +427,49 @@ export default function OrderListView() {
             </Button>
           }
         />
-<Grid
-  container
-  justifyContent="flex-end"
-  style={{ marginBottom: "16px" }}
->
-<Button
+<Grid container justifyContent="flex-end" sx={{ mb: 2 }}>
+  <ConditionalComponent
+    isValid={!loadingExportOrder}
+    defaultComponent={
+      <Button
+        variant="contained"
+        disabled
+        sx={{ mr: 1 }}
+      >
+        <CircularProgress size={24} sx={{ color: "white" }} />
+      </Button>
+    }
+  >
+    <Button
       variant="contained"
       onClick={downloadOrdersCSV}
-      style={{ marginRight: "8px" }}
-      disabled={loading}  
+      sx={{ mr: 1 }}
     >
-      {loadingExportOrder ? (
-        <CircularProgress size={24} style={{ color: "white" }} /> 
-      ) : (
-        "Exporter les commandes"
-      )}
+      Exporter les commandes
     </Button>
-  
-  <Button
+  </ConditionalComponent>
+
+
+  <ConditionalComponent
+    isValid={!loadingExportProduct}
+    defaultComponent={
+      <Button
+        variant="contained"
+        disabled
+      >
+        <CircularProgress size={24} sx={{ color: "white" }} />
+      </Button>
+    }
+  >
+    <Button
       variant="contained"
       onClick={downloadProductsCSV}
-      disabled={loading}  
     >
-      {loadingExportProduct ? (
-        <CircularProgress size={24} style={{ color: "white" }} />  
-      ) : (
-        "Exporter les produits"
-      )}
+      Exporter les produits
     </Button>
+  </ConditionalComponent>
 </Grid>
 
-
         <Card>
 
           <Tabs