[Feat] add loading

mistricky · mistricky · commit 0a3173969ecd · 2025-12-25T16:28:46.000+08:00
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/app/Cargo.toml b/app/Cargo.toml
@@ -53,3 +53,4 @@ syntect = { version = "5", default-features = false, features = ["default-fancy"
 katex = { version = "0.4.6", default-features = false, features = ["wasm-js"] }
 gloo-worker = { version = "0.4", features = ["futures"] }
 gloo-timers = { version = "0.3", features = ["futures"] }
+uuid = { version = "1", features = ["v4", "js"] }
diff --git a/app/src/commands/boa.rs b/app/src/commands/boa.rs
@@ -60,11 +60,16 @@ async fn run_boa(cli: BoaCommand, ctx: CommandContext) {
     let mut boa_ctx = Context::default();
     match boa_ctx.eval(Source::from_bytes(source.as_bytes())) {
         Ok(value) => match value.to_string(&mut boa_ctx) {
-            Ok(out) => ctx.terminal.push_text(out.to_std_string_escaped()),
-            Err(err) => ctx
-                .terminal
-                .push_error(format!("boa: failed to stringify result: {err}")),
+            Ok(out) => {
+                ctx.terminal.push_text(out.to_std_string_escaped());
+            }
+            Err(err) => {
+                ctx.terminal
+                    .push_error(format!("boa: failed to stringify result: {err}"));
+            }
         },
-        Err(err) => ctx.terminal.push_error(format!("boa: {err}")),
-    }
+        Err(err) => {
+            ctx.terminal.push_error(format!("boa: {err}"));
+        }
+    };
 }
diff --git a/app/src/commands/cat.rs b/app/src/commands/cat.rs
@@ -1,9 +1,9 @@
 use crate::commands::fetch::fetch_text_with_cache;
 use crate::commands::{parse_cli, CommandContext};
+use crate::utils::run_async;
 use crate::vfs_data::{find_node, format_path, resolve_path, VfsKind};
 use micro_cli::Parser;
 use shell_parser::integration::{CommandInfo, ExecutableCommand};
-use wasm_bindgen_futures::spawn_local;
 use yew::html;
 
 #[derive(Parser, Debug, Default)]
@@ -19,7 +19,7 @@ impl ExecutableCommand<CommandContext> for CatCommand {
             return Ok(());
         };
         let ctx = ctx.clone();
-        spawn_local(async move {
+        run_async(ctx.clone(), async move {
             run_cat(cli, ctx).await;
         });
         Ok(())
@@ -51,9 +51,13 @@ async fn run_cat(cli: CatCommand, ctx: CommandContext) {
     let uri = format!("/data/{}", path.join("/"));
 
     match fetch_text_with_cache(&uri, &cache).await {
-        Ok(text) => ctx.terminal.push_component(html! {
-            <span class="whitespace-break-spaces">{text}</span>
-        }),
-        Err(err) => ctx.terminal.push_error(format!("cat: {err}")),
+        Ok(text) => {
+            ctx.terminal.push_component(html! {
+                <span class="whitespace-break-spaces">{text}</span>
+            });
+        }
+        Err(err) => {
+            ctx.terminal.push_error(format!("cat: {err}"));
+        }
     }
 }
diff --git a/app/src/commands/clear.rs b/app/src/commands/clear.rs
@@ -5,8 +5,12 @@ use shell_parser::integration::{CommandInfo, ExecutableCommand};
 #[derive(Parser, Debug, Default)]
 #[command(name = "clear", about = "Clear the terminal")]
 pub struct ClearCommand {
-    #[arg(short = 'l', long = "last", help = "Clear the last output")]
-    last: bool,
+    #[arg(
+        short = 'n',
+        long = "number",
+        help = "Clear the {number} output counting from the end"
+    )]
+    num: Option<usize>,
 }
 
 impl ExecutableCommand<CommandContext> for ClearCommand {
@@ -15,7 +19,11 @@ impl ExecutableCommand<CommandContext> for ClearCommand {
             return Ok(());
         };
 
-        ctx.terminal.clear(cli.last);
+        if let Some(num) = cli.num {
+            ctx.terminal.clear(Some(num));
+        } else {
+            ctx.terminal.clear(None);
+        }
 
         Ok(())
     }
diff --git a/app/src/commands/du.rs b/app/src/commands/du.rs
@@ -24,9 +24,10 @@ impl ExecutableCommand<CommandContext> for DuCommand {
                 ctx.terminal
                     .push_text(format!("{} => {} bytes", format_path(&path), bytes));
             }
-            None => ctx
-                .terminal
-                .push_error(format!("du: {}: not found", format_path(&path))),
+            None => {
+                ctx.terminal
+                    .push_error(format!("du: {}: not found", format_path(&path)));
+            }
         }
         Ok(())
     }
diff --git a/app/src/commands/eval.rs b/app/src/commands/eval.rs
@@ -58,6 +58,8 @@ async fn run_eval(cli: EvalCommand, ctx: CommandContext) {
             }
             ctx.terminal.execute_command(script);
         }
-        Err(err) => ctx.terminal.push_error(format!("eval: {err}")),
+        Err(err) => {
+            ctx.terminal.push_error(format!("eval: {err}"));
+        }
     }
 }
diff --git a/app/src/commands/history.rs b/app/src/commands/history.rs
@@ -99,8 +99,12 @@ impl ExecutableCommand<CommandContext> for HistoryCommand {
         };
 
         match result {
-            Ok(message) => ctx.terminal.push_text(format!("history: {message}")),
-            Err(err) => ctx.terminal.push_error(err),
+            Ok(message) => {
+                ctx.terminal.push_text(format!("history: {message}"));
+            }
+            Err(err) => {
+                ctx.terminal.push_error(err);
+            }
         }
 
         Ok(())
diff --git a/app/src/commands/ls.rs b/app/src/commands/ls.rs
@@ -57,15 +57,20 @@ impl ExecutableCommand<CommandContext> for LsCommand {
                     };
                     ctx.terminal.push_component(rendered);
                 }
-                _ => ctx.terminal.push_error("ls: empty directory"),
+                _ => {
+                    ctx.terminal.push_error("ls: empty directory");
+                }
             },
-            Some(_) => ctx
-                .terminal
-                .push_error(format!("ls: {}: not a directory", format_path(&path))),
-            None => ctx.terminal.push_error(format!(
-                "ls: {}: no such file or directory",
-                format_path(&path)
-            )),
+            Some(_) => {
+                ctx.terminal
+                    .push_error(format!("ls: {}: not a directory", format_path(&path)));
+            }
+            None => {
+                ctx.terminal.push_error(format!(
+                    "ls: {}: no such file or directory",
+                    format_path(&path)
+                ));
+            }
         }
         Ok(())
     }
diff --git a/app/src/commands/navigate.rs b/app/src/commands/navigate.rs
@@ -24,7 +24,9 @@ impl ExecutableCommand<CommandContext> for NavigateCommand {
             terminal.execute_command(&format!("history --push {path}"));
             match terminal.to_terminal() {
                 Some(full_terminal) => run_route(&path, full_terminal),
-                None => terminal.push_error("navigate: unable to execute route"),
+                None => {
+                    terminal.push_error("navigate: unable to execute route");
+                }
             }
         });
 
diff --git a/app/src/commands/render.rs b/app/src/commands/render.rs
@@ -138,7 +138,9 @@ async fn run_render(cli: RenderCommand, ctx: CommandContext) {
             };
             ctx.terminal.push_component(node);
         }
-        Err(err) => ctx.terminal.push_error(format!("render: {err}")),
+        Err(err) => {
+            ctx.terminal.push_error(format!("render: {err}"));
+        }
     }
 }
 
diff --git a/app/src/commands/stat.rs b/app/src/commands/stat.rs
@@ -19,11 +19,12 @@ impl ExecutableCommand<CommandContext> for StatCommand {
         match find_node(&ctx.vfs, &path) {
             Some(node) => {
                 ctx.terminal
-                    .push_text(format!("{} => {}", format_path(&path), node_summary(node)))
+                    .push_text(format!("{} => {}", format_path(&path), node_summary(node)));
+            }
+            None => {
+                ctx.terminal
+                    .push_error(format!("stat: {}: not found", format_path(&path)));
             }
-            None => ctx
-                .terminal
-                .push_error(format!("stat: {}: not found", format_path(&path))),
         }
         Ok(())
     }
diff --git a/app/src/components/markdown_renderer/code_block.rs b/app/src/components/markdown_renderer/code_block.rs
@@ -5,6 +5,7 @@ use wasm_bindgen_futures::{spawn_local, JsFuture};
 use web_sys::window;
 use yew::prelude::*;
 
+use crate::components::SVGIcon;
 use crate::highlight_service::HighlightService;
 
 #[derive(Properties, PartialEq)]
@@ -100,10 +101,8 @@ pub fn code_block(props: &CodeBlockProps) -> Html {
             });
         })
     };
-    let copy_icon =
-        Html::from_html_unchecked(AttrValue::from(include_str!("../../icons/copy.svg")));
-    let check_icon =
-        Html::from_html_unchecked(AttrValue::from(include_str!("../../icons/check.svg")));
+    let copy_icon = html! { <SVGIcon src={include_str!("../../icons/copy.svg")} /> };
+    let check_icon = html! { <SVGIcon src={include_str!("../../icons/check.svg")} /> };
 
     html! {
         <div class="group relative my-4">
diff --git a/app/src/components/mod.rs b/app/src/components/mod.rs
@@ -4,6 +4,7 @@ mod output_log;
 mod post_item;
 mod prompt_line;
 mod shadow_scroll;
+mod svg_icon;
 mod terminal_window;
 mod typewriter;
 
@@ -12,5 +13,6 @@ pub use output_log::OutputLog;
 pub use post_item::PostItem;
 pub use prompt_line::{HistoryDirection, PromptLine};
 pub use shadow_scroll::ShadowScroll;
+pub use svg_icon::SVGIcon;
 pub use terminal_window::TerminalWindow;
 pub use typewriter::Typewriter;
diff --git a/app/src/components/output_log.rs b/app/src/components/output_log.rs
@@ -11,12 +11,12 @@ pub struct OutputLogProps {
 pub fn output_log(props: &OutputLogProps) -> Html {
     html! {
         <div class="space-y-1 font-mono text-base sm:text-sm text-slate-100">
-            { for props.lines.iter().enumerate().map(|(idx, line)| render_line(idx, line)) }
+            { for props.lines.iter().map(render_line) }
         </div>
     }
 }
 
-fn render_line(idx: usize, line: &TermLine) -> Html {
+fn render_line(line: &TermLine) -> Html {
     let content = match line.kind {
         OutputKind::Text => html! { &line.body },
         OutputKind::Html => Html::from_html_unchecked(AttrValue::from(line.body.clone())),
@@ -36,7 +36,7 @@ fn render_line(idx: usize, line: &TermLine) -> Html {
     };
 
     html! {
-        <div class="output-log leading-relaxed flex gap-2 w-full" key={idx.to_string()}>
+        <div class="output-log leading-relaxed flex gap-2 w-full" key={line.id.to_string()}>
             <span class={classes!(text_class, "break-words", "w-full")}>{ content }</span>
         </div>
     }
diff --git a/app/src/components/svg_icon.rs b/app/src/components/svg_icon.rs
@@ -0,0 +1,12 @@
+use yew::prelude::*;
+use yew::AttrValue;
+
+#[derive(Properties, PartialEq)]
+pub struct SvgIconProps {
+    pub src: &'static str,
+}
+
+#[function_component(SVGIcon)]
+pub fn svg_icon(props: &SvgIconProps) -> Html {
+    Html::from_html_unchecked(AttrValue::from(props.src))
+}
diff --git a/app/src/icons/loading.svg b/app/src/icons/loading.svg
diff --git a/app/src/terminal.rs b/app/src/terminal.rs
diff --git a/app/src/terminal_state.rs b/app/src/terminal_state.rs
diff --git a/app/src/types.rs b/app/src/types.rs
diff --git a/app/src/utils/mod.rs b/app/src/utils/mod.rs
diff --git a/app/src/utils/run_async.rs b/app/src/utils/run_async.rs

Original file line number	Diff line number	Diff line change
`@@ -24,9 +24,10 @@ impl ExecutableCommand<CommandContext> for DuCommand {`
`24`	`24`	`ctx.terminal`
`25`	`25`	`.push_text(format!("{} => {} bytes", format_path(&path), bytes));`
`26`	`26`	`}`
`27`		`- None => ctx`
`28`		`- .terminal`
`29`		`- .push_error(format!("du: {}: not found", format_path(&path))),`
	`27`	`+ None => {`
	`28`	`+ ctx.terminal`
	`29`	`+ .push_error(format!("du: {}: not found", format_path(&path)));`
	`30`	`+ }`
`30`	`31`	`}`
`31`	`32`	`Ok(())`
`32`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,8 @@ async fn run_eval(cli: EvalCommand, ctx: CommandContext) {`
`58`	`58`	`}`
`59`	`59`	`ctx.terminal.execute_command(script);`
`60`	`60`	`}`
`61`		`- Err(err) => ctx.terminal.push_error(format!("eval: {err}")),`
	`61`	`+ Err(err) => {`
	`62`	`+ ctx.terminal.push_error(format!("eval: {err}"));`
	`63`	`+ }`
`62`	`64`	`}`
`63`	`65`	`}`