Merge pull request #65 from TheBestTvarynka/feature/non-blocking

Non-blocking diffs computation using workers
TheBestTvarynka · Mar 18, 2024 · 75a0f51 · 75a0f51
2 parents e5ca16f + 78179bd
commit 75a0f51
Show file tree

Hide file tree

Showing 13 changed files with 373 additions and 78 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "web-app"
+name = "crypto-helper"
 version = "0.10.0"
 description = "The crypto-helper is an online app that helps to work with the diferent crypto algorithms."
 edition = "2021"
@@ -14,11 +14,20 @@ members = [
  "crates/prop-strategies"
 ]
 
+[[bin]]
+name = "crypto-helper-app"
+path = "src/bin/main.rs"
+
+[[bin]]
+name = "worker"
+path = "src/bin/worker.rs"
+
 [dependencies]
 yew = { version = "0.21", features = ["csr"] }
 yew-router = "0.18"
 yew-notifications = { git = "https://github.com/TheBestTvarynka/yew-notifications.git", features = ["standard-notification"] }
 yew-hooks = "0.3"
+yew-agent = "0.3"
 
 # wasm
 js-sys = "0.3"
@@ -57,4 +66,4 @@ oid = { version = "0.2", default-features = false }
 paste = "1.0"
 
 # diff
-similar = "2.4"
+similar = { version = "2.4", features = ["serde"] }
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
  <head>
  <meta charset="utf-8" />
  <title>Crypto helper</title>
+
  <link data-trunk rel="sass" href="public/styles/footer.scss" />
  <link data-trunk rel="sass" href="public/styles/header.scss" />
  <link data-trunk rel="sass" href="public/styles/style.scss" />
@@ -32,5 +33,9 @@
 
  <!-- diff styles -->
  <link data-trunk rel="sass" href="public/styles/diff/styles.scss" />
+
+ <!-- bins -->
+ <link data-trunk rel="rust" href="Cargo.toml" data-bin="crypto-helper-app" data-type="main" data-weak-refs />
+ <link data-trunk rel="rust" href="Cargo.toml" data-bin="worker" data-type="worker" data-weak-refs />
  </head>
 </html>
diff --git a/public/styles/diff/styles.scss b/public/styles/diff/styles.scss
@@ -33,4 +33,6 @@
  background-color: #edd5ce;
  padding-right: 0.3em;
  padding-left: 0.3em;
+ border-bottom: 2px solid #403735;
+ margin-right: 0.3em;
 }
diff --git a/public/styles/style.scss b/public/styles/style.scss
@@ -212,3 +212,92 @@ article {
  color: #dbcfbf;
  cursor: pointer;
 }
+
+.loader-wrapper {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ width: 100%;
+ display: inline-flex;
+}
+
+.loader {
+ color: #322a50;
+ font-size: 25px;
+ overflow: hidden;
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ margin: auto;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation: load6 1.3s infinite ease, round 1.3s infinite ease;
+ animation: load6 1.3s infinite ease, round 1.3s infinite ease;
+}
+@-webkit-keyframes load6 {
+ 0% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+ 5%,
+ 95% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+ 10%,
+ 59% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
+ }
+ 20% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
+ }
+ 38% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+ }
+ 100% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+}
+
+@keyframes load6 {
+ 0% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+ 5%,
+ 95% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+ 10%,
+ 59% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
+ }
+ 20% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
+ }
+ 38% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+ }
+ 100% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+}
+
+@-webkit-keyframes round {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes round {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+};
diff --git a/src/bin/main.rs b/src/bin/main.rs
@@ -0,0 +1,7 @@
+use crypto_helper::App;
+
+fn main() {
+ wasm_logger::init(wasm_logger::Config::default());
+
+ yew::Renderer::<App>::new().render();
+}
diff --git a/src/bin/worker.rs b/src/bin/worker.rs
@@ -0,0 +1,8 @@
+use crypto_helper::diff::{DiffTask, JsonCodec};
+use yew_agent::Registrable;
+
+fn main() {
+ wasm_logger::init(wasm_logger::Config::default());
+
+ DiffTask::registrar().encoding::<JsonCodec>().register();
+}
diff --git a/src/common/loader.rs b/src/common/loader.rs
@@ -0,0 +1,10 @@
+use yew::{function_component, html, Html};
+
+#[function_component(Loader)]
+pub fn loader() -> Html {
+ html! {
+ <div class="loader-wrapper">
+ <div class="loader" />
+ </div>
+ }
+}
diff --git a/src/common/mod.rs b/src/common/mod.rs
@@ -1,6 +1,7 @@
 mod byte_input;
 mod bytes_viewer;
 mod checkbox;
+mod loader;
 mod rc_slice;
 mod simple_output;
 mod switch;
@@ -9,6 +10,7 @@ mod table;
 use base64::Engine;
 pub use byte_input::{build_byte_input, ByteInput};
 pub use checkbox::Checkbox;
+pub use loader::Loader;
 pub use rc_slice::RcSlice;
 pub use simple_output::build_simple_output;
 pub use switch::Switch;