feat: Interrupt the last image loading request

lizidev · lizidev · commit f9472f4efe9a · 2025-06-03T15:46:08.000+08:00
diff --git a/packages/blitz-dom/src/document.rs b/packages/blitz-dom/src/document.rs
@@ -1304,7 +1304,7 @@ impl BaseDocument {
 
     /// Used to determine whether a document matches a media query string,
     /// and to monitor a document to detect when it matches (or stops matching) that media query.
-    /// 
+    ///
     /// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
     pub fn match_media(&self, media_query_string: &str) -> bool {
         let mut input = cssparser::ParserInput::new(media_query_string);
diff --git a/packages/blitz-dom/src/layout/construct.rs b/packages/blitz-dom/src/layout/construct.rs
@@ -108,10 +108,11 @@ pub(crate) fn collect_layout_children(
                         .unwrap()
                         .element_data_mut()
                         .unwrap()
-                        .node_specific_data = NodeSpecificData::Image(Box::new(ImageContext {
-                        selected_source: ImageSource::new("about:blank".to_string()),
-                        data: Some(svg.into()),
-                    }));
+                        .node_specific_data =
+                        NodeSpecificData::Image(Box::new(ImageContext::new_with_data(
+                            ImageSource::new("about:blank".to_string()),
+                            svg.into(),
+                        )));
                 }
                 Err(err) => {
                     println!("{container_node_id} SVG parse failed");
diff --git a/packages/blitz-dom/src/node.rs b/packages/blitz-dom/src/node.rs
@@ -1,4 +1,5 @@
 use atomic_refcell::{AtomicRef, AtomicRefCell};
+use blitz_traits::net::AbortController;
 use color::{AlphaColor, Srgb};
 use keyboard_types::Modifiers;
 use markup5ever::{LocalName, QualName, local_name};
@@ -584,17 +585,37 @@ impl From<usvg::Tree> for ImageData {
     }
 }
 
-#[derive(Clone)]
+#[derive(Debug)]
 pub struct ImageContext {
     pub selected_source: ImageSource,
     pub data: Option<ImageData>,
+    pub controller: Option<AbortController>,
+}
+
+impl Clone for ImageContext {
+    fn clone(&self) -> Self {
+        Self {
+            selected_source: self.selected_source.clone(),
+            data: self.data.clone(),
+            controller: None,
+        }
+    }
 }
 
 impl ImageContext {
-    fn new(selected_source: ImageSource) -> Self {
+    fn new_with_controller(selected_source: ImageSource, controller: AbortController) -> Self {
         Self {
             selected_source,
             data: None,
+            controller: Some(controller),
+        }
+    }
+
+    pub fn new_with_data(selected_source: ImageSource, data: ImageData) -> Self {
+        Self {
+            selected_source,
+            data: Some(data),
+            controller: None,
         }
     }
 }
diff --git a/packages/blitz-dom/src/node/image.rs b/packages/blitz-dom/src/node/image.rs
@@ -1,6 +1,6 @@
 use super::{ImageContext, NodeSpecificData};
 use crate::{BaseDocument, net::ImageHandler, util::ImageType};
-use blitz_traits::net::Request;
+use blitz_traits::net::{AbortController, Request};
 use markup5ever::local_name;
 use mime::Mime;
 use std::{
@@ -44,23 +44,31 @@ impl BaseDocument {
             return;
         };
 
-        if let NodeSpecificData::Image(context) = &mut data.node_specific_data {
-            if context.selected_source.url == selected_source.url
-                && context.selected_source.descriptor.density == selected_source.descriptor.density
+        let controller = AbortController::default();
+        let signal = controller.signal.clone();
+
+        match &mut data.node_specific_data {
+            NodeSpecificData::Image(context)
+                if !context
+                    .selected_source
+                    .is_same_image_source(&selected_source) =>
             {
-                return;
-            } else {
                 context.selected_source = selected_source;
+                if let Some(controller) = context.controller.replace(controller) {
+                    controller.abort();
+                }
             }
-        } else if let NodeSpecificData::None = data.node_specific_data {
-            data.node_specific_data =
-                NodeSpecificData::Image(Box::new(ImageContext::new(selected_source)));
-        } else {
-            return;
+            NodeSpecificData::None => {
+                data.node_specific_data = NodeSpecificData::Image(Box::new(
+                    ImageContext::new_with_controller(selected_source, controller),
+                ));
+            }
+            _ => return,
         }
+
         self.net_provider.fetch(
             self.id(),
-            Request::get(src),
+            Request::get(src).signal(signal),
             Box::new(ImageHandler::new(target_id, ImageType::Image)),
         );
     }
@@ -383,6 +391,11 @@ impl ImageSource {
         }
     }
 
+    #[inline]
+    fn is_same_image_source(&self, other: &Self) -> bool {
+        self.url == other.url && self.descriptor.density == other.descriptor.density
+    }
+
     fn parse(input: &str) -> Option<Self> {
         let image_source_split = input.split_ascii_whitespace().collect::<Vec<&str>>();
         let len = image_source_split.len();
diff --git a/packages/blitz-net/src/lib.rs b/packages/blitz-net/src/lib.rs
@@ -1,7 +1,9 @@
-use blitz_traits::net::{BoxedHandler, Bytes, NetCallback, NetProvider, Request, SharedCallback};
+use blitz_traits::net::{
+    AbortSignal, BoxedHandler, Bytes, NetCallback, NetProvider, Request, SharedCallback,
+};
 use data_url::DataUrl;
 use reqwest::Client;
-use std::sync::Arc;
+use std::{marker::PhantomData, pin::Pin, sync::Arc, task::Poll};
 use tokio::{
     runtime::Handle,
     sync::mpsc::{UnboundedReceiver, UnboundedSender, unbounded_channel},
@@ -75,18 +77,6 @@ impl<D: 'static> Provider<D> {
         })
     }
 
-    async fn fetch_with_handler(
-        client: Client,
-        doc_id: usize,
-        request: Request,
-        handler: BoxedHandler<D>,
-        res_callback: SharedCallback<D>,
-    ) -> Result<(), ProviderError> {
-        let (_response_url, bytes) = Self::fetch_inner(client, request).await?;
-        handler.bytes(doc_id, bytes, res_callback);
-        Ok(())
-    }
-
     #[allow(clippy::type_complexity)]
     pub fn fetch_with_callback(
         &self,
@@ -108,24 +98,78 @@ impl<D: 'static> Provider<D> {
 }
 
 impl<D: 'static> NetProvider<D> for Provider<D> {
-    fn fetch(&self, doc_id: usize, request: Request, handler: BoxedHandler<D>) {
+    fn fetch(&self, doc_id: usize, mut request: Request, handler: BoxedHandler<D>) {
         let client = self.client.clone();
         let callback = Arc::clone(&self.resource_callback);
         println!("Fetching {}", &request.url);
         self.rt.spawn(async move {
             let url = request.url.to_string();
-            let res = Self::fetch_with_handler(client, doc_id, request, handler, callback).await;
-            if let Err(e) = res {
-                eprintln!("Error fetching {url}: {e:?}");
+            let signal = request.signal.take();
+            let result = if let Some(signal) = signal {
+                AbortFetch::new(
+                    signal,
+                    Box::pin(async move { Self::fetch_inner(client, request).await }),
+                )
+                .await
             } else {
-                println!("Success {url}");
+                Self::fetch_inner(client, request).await
+            };
+
+            match result {
+                Ok((_response_url, bytes)) => {
+                    handler.bytes(doc_id, bytes, callback);
+                    println!("Success {url}");
+                }
+                Err(e) => {
+                    eprintln!("Error fetching {url}: {e:?}");
+                }
             }
         });
     }
 }
 
+struct AbortFetch<F, T> {
+    signal: AbortSignal,
+    future: F,
+    _rt: PhantomData<T>,
+}
+
+impl<F, T> AbortFetch<F, T> {
+    fn new(signal: AbortSignal, future: F) -> Self {
+        Self {
+            signal,
+            future,
+            _rt: PhantomData,
+        }
+    }
+}
+
+impl<F, T> Future for AbortFetch<F, T>
+where
+    F: Future + Unpin + Send + 'static,
+    F::Output: Send + Into<Result<T, ProviderError>> + 'static,
+    T: Unpin,
+{
+    type Output = Result<T, ProviderError>;
+
+    fn poll(
+        mut self: std::pin::Pin<&mut Self>,
+        cx: &mut std::task::Context<'_>,
+    ) -> std::task::Poll<Self::Output> {
+        if self.signal.aborted() {
+            return Poll::Ready(Err(ProviderError::Abort));
+        }
+
+        match Pin::new(&mut self.future).poll(cx) {
+            Poll::Ready(output) => Poll::Ready(output.into()),
+            Poll::Pending => Poll::Pending,
+        }
+    }
+}
+
 #[derive(Debug)]
 pub enum ProviderError {
+    Abort,
     Io(std::io::Error),
     DataUrl(data_url::DataUrlError),
     DataUrlBase64(data_url::forgiving_base64::InvalidBase64),
diff --git a/packages/blitz-traits/src/navigation.rs b/packages/blitz-traits/src/navigation.rs
@@ -58,13 +58,15 @@ impl NavigationOptions {
                 method: Method::POST,
                 headers,
                 body: document_resource,
+                signal: None,
             }
         } else {
             Request {
                 url: self.url,
                 method: Method::GET,
                 headers,
                 body: Bytes::new(),
+                signal: None,
             }
         }
     }
diff --git a/packages/blitz-traits/src/net.rs b/packages/blitz-traits/src/net.rs
@@ -1,6 +1,9 @@
 pub use bytes::Bytes;
 pub use http::{self, HeaderMap, Method};
-use std::sync::Arc;
+use std::sync::{
+    Arc,
+    atomic::{AtomicBool, Ordering},
+};
 pub use url::Url;
 
 pub type SharedProvider<D> = Arc<dyn NetProvider<D>>;
@@ -40,6 +43,7 @@ pub struct Request {
     pub method: Method,
     pub headers: HeaderMap,
     pub body: Bytes,
+    pub signal: Option<AbortSignal>,
 }
 impl Request {
     /// A get request to the specified Url and an empty body
@@ -49,8 +53,14 @@ impl Request {
             method: Method::GET,
             headers: HeaderMap::new(),
             body: Bytes::new(),
+            signal: None,
         }
     }
+
+    pub fn signal(mut self, signal: AbortSignal) -> Self {
+        self.signal = Some(signal);
+        self
+    }
 }
 
 /// A default noop NetProvider
@@ -66,3 +76,42 @@ pub struct DummyNetCallback;
 impl<D: Send + Sync + 'static> NetCallback<D> for DummyNetCallback {
     fn call(&self, _doc_id: usize, _result: Result<D, Option<String>>) {}
 }
+
+/// The AbortController interface represents a controller object that
+/// allows you to abort one or more Web requests as and when desired.
+///
+/// https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+#[derive(Debug, Default)]
+pub struct AbortController {
+    pub signal: AbortSignal,
+}
+
+impl AbortController {
+    /// The abort() method of the AbortController interface aborts
+    /// an asynchronous operation before it has completed.
+    /// This is able to abort fetch requests.
+    ///
+    /// https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
+    pub fn abort(self) {
+        self.signal.0.store(true, Ordering::SeqCst);
+    }
+}
+
+/// The AbortSignal interface represents a signal object that allows you to
+/// communicate with an asynchronous operation (such as a fetch request) and
+/// abort it if required via an AbortController object.
+///
+/// https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
+#[derive(Debug, Default, Clone)]
+pub struct AbortSignal(Arc<AtomicBool>);
+
+impl AbortSignal {
+    /// The aborted read-only property returns a value that indicates whether
+    /// the asynchronous operations the signal is communicating with are
+    /// aborted (true) or not (false).
+    ///
+    /// https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/aborted
+    pub fn aborted(&self) -> bool {
+        self.0.load(Ordering::SeqCst)
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -58,13 +58,15 @@ impl NavigationOptions {`
`58`	`58`	`method: Method::POST,`
`59`	`59`	`headers,`
`60`	`60`	`body: document_resource,`
	`61`	`+ signal: None,`
`61`	`62`	`}`
`62`	`63`	`} else {`
`63`	`64`	`Request {`
`64`	`65`	`url: self.url,`
`65`	`66`	`method: Method::GET,`
`66`	`67`	`headers,`
`67`	`68`	`body: Bytes::new(),`
	`69`	`+ signal: None,`
`68`	`70`	`}`
`69`	`71`	`}`
`70`	`72`	`}`