include loading when calculating data + algo price, tooltip show order price

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -74,6 +74,12 @@ export default function FormStartCompute({
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
   const [totalPrice, setTotalPrice] = useState(asset?.accessDetails?.price)
+  const [datasetOrderPrice, setDatasetOrderPrice] = useState(
+    asset?.accessDetails?.price
+  )
+  const [algoOrderPrice, setAlgoOrderPrice] = useState(
+    selectedAlgorithmAsset?.accessDetails?.price
+  )
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(false)
   const { accountId, balance } = useWeb3()
 
@@ -110,6 +116,13 @@ export default function FormStartCompute({
   useEffect(() => {
     if (!asset?.accessDetails || !selectedAlgorithmAsset?.accessDetails) return
 
+    setDatasetOrderPrice(
+      datasetOrderPriceAndFees?.price || asset.accessDetails.price
+    )
+    setAlgoOrderPrice(
+      algoOrderPriceAndFees?.price ||
+        selectedAlgorithmAsset?.accessDetails.price
+    )
     const priceDataset =
       hasPreviousOrder || hasDatatoken
         ? 0
@@ -164,6 +177,8 @@ export default function FormStartCompute({
         algorithmConsumeDetails={selectedAlgorithmAsset?.accessDetails}
         symbol={oceanSymbol}
         totalPrice={Number.parseFloat(totalPrice)}
+        datasetOrderPrice={datasetOrderPrice}
+        algoOrderPrice={algoOrderPrice}
       />
 
       <ButtonBuy

src/components/Asset/AssetActions/Compute/PriceOutput.tsx

@@ -15,6 +15,8 @@ interface PriceOutputProps {
   hasDatatokenSelectedComputeAsset: boolean
   algorithmConsumeDetails: AccessDetails
   selectedComputeAssetTimeout: string
+  datasetOrderPrice?: number
+  algoOrderPrice?: number
 }
 
 function Row({
@@ -62,7 +64,9 @@ export default function PriceOutput({
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   algorithmConsumeDetails,
-  selectedComputeAssetTimeout
+  selectedComputeAssetTimeout,
+  datasetOrderPrice,
+  algoOrderPrice
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
 
@@ -76,14 +80,20 @@ export default function PriceOutput({
             <Row
               hasPreviousOrder={hasPreviousOrder}
               hasDatatoken={hasDatatoken}
-              price={Number.parseFloat(asset?.accessDetails?.price)}
+              price={
+                datasetOrderPrice ||
+                Number.parseFloat(asset?.accessDetails?.price)
+              }
               timeout={assetTimeout}
               symbol={symbol}
             />
             <Row
               hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
               hasDatatoken={hasDatatokenSelectedComputeAsset}
-              price={Number.parseFloat(algorithmConsumeDetails?.price)}
+              price={
+                algoOrderPrice ||
+                Number.parseFloat(algorithmConsumeDetails?.price)
+              }
               timeout={selectedComputeAssetTimeout}
               symbol={symbol}
               sign="+"

src/components/Asset/AssetActions/Compute/index.tsx

@@ -85,8 +85,12 @@ export default function Compute({
   const [computeStatusText, setComputeStatusText] = useState('')
   const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
+  const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
+    useState(false)
   const [algoOrderPriceAndFees, setAlgoOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
+  const [isRequestingAlgoOrderPrice, setIsRequestingAlgoOrderPrice] =
+    useState(false)
   const isComputeButtonDisabled =
     isJobStarting === true ||
     file === null ||
@@ -119,8 +123,12 @@ export default function Compute({
         asset?.accessDetails?.type === 'free'
       )
         return
+
+      setIsRequestingDataseOrderPrice(true)
+      setComputeStatusText('Calculating price including fees.')
       const orderPriceAndFees = await getOrderPriceAndFees(asset, accountId)
       setDatasetOrderPriceAndFees(orderPriceAndFees)
+      setIsRequestingDataseOrderPrice(false)
     }
 
     initDatasetPriceAndFees()
@@ -141,11 +149,15 @@ export default function Compute({
         selectedAlgorithmAsset?.accessDetails?.type === 'free'
       )
         return
+
+      setIsRequestingAlgoOrderPrice(true)
+      setComputeStatusText('Calculating price including fees.')
       const orderPriceAndFees = await getOrderPriceAndFees(
         selectedAlgorithmAsset,
         accountId
       )
       setAlgoOrderPriceAndFees(orderPriceAndFees)
+      setIsRequestingAlgoOrderPrice(false)
     }
 
     async function initSelectedAlgo() {
@@ -444,7 +456,11 @@ export default function Compute({
             ddoListAlgorithms={ddoAlgorithmList}
             selectedAlgorithmAsset={selectedAlgorithmAsset}
             setSelectedAlgorithm={setSelectedAlgorithmAsset}
-            isLoading={isJobStarting}
+            isLoading={
+              isJobStarting ||
+              isRequestingDataseOrderPrice ||
+              isRequestingAlgoOrderPrice
+            }
             isComputeButtonDisabled={isComputeButtonDisabled}
             hasPreviousOrder={validOrderTx !== undefined}
             hasDatatoken={hasDatatoken}