fix: graceful 504 UI

cors change is justified because it's a public API with no auth

Author: Madoshakalaka

frontend/src/app.rs

@@ -1,5 +1,5 @@
 use crate::components::editor::Editor;
-use crate::components::output::OutputContainer;
+use crate::components::output::{CompileTimer, OutputContainer};
 use crate::utils::query::Query;
 use crate::{ActionButtonState, ActionButtonStateContext, icon};
 use gloo::history::{BrowserHistory, History};
@@ -110,7 +110,9 @@ pub fn App() -> Html {
                 </div>
                 <div class="w-full min-h-0">
                     if let Some(ref data) = *data {
-                        <OutputContainer value={data} key={*run_count} />
+                        <Suspense fallback={html! { <CompileTimer /> }}>
+                            <OutputContainer value={data} key={*run_count} />
+                        </Suspense>
                     }
                 </div>
             </Split>

frontend/src/components/output.rs

@@ -1,83 +1,92 @@
 use crate::api::BACKEND_URL;
 use crate::{ActionButtonState, ActionButtonStateContext};
 use gloo::timers::callback::Interval;
-use gloo_net::http::QueryParams;
+use gloo_net::http::{QueryParams, Request};
 use std::cell::Cell;
 use std::rc::Rc;
+use yew::HtmlResult;
 use yew::prelude::*;
+use yew::suspense::use_future_with;
+
+#[derive(Clone, PartialEq)]
+enum CompileResult {
+    Done(String),
+    ColdStartTimeout,
+}
 
 #[derive(Properties, PartialEq, Eq)]
 pub struct OutputContainerProps {
     pub value: Rc<str>,
 }
 
 #[component]
-pub fn OutputContainer(props: &OutputContainerProps) -> Html {
+pub fn OutputContainer(props: &OutputContainerProps) -> HtmlResult {
     let action_button_state = use_context::<ActionButtonStateContext>().unwrap();
-    let loading = use_state(|| true);
-    let elapsed = use_state(|| 0u32);
-    let src = use_state(String::new);
 
-    {
-        let loading = loading.clone();
-        let src = src.clone();
-        let elapsed = elapsed.clone();
-        use_effect_with(Rc::clone(&props.value), move |value| {
-            elapsed.set(0);
-            loading.set(true);
-            src.set({
-                let query = QueryParams::new();
-                query.append("code", value);
-                format!("{}/run?{}", BACKEND_URL, query)
-            });
-        })
-    };
+    let result = use_future_with(Rc::clone(&props.value), |value| async move {
+        let query = QueryParams::new();
+        query.append("code", &value);
+        let url = format!("{}/run?{}", BACKEND_URL, query);
+
+        match Request::get(&url).send().await {
+            Ok(resp) if resp.status() == 504 => CompileResult::ColdStartTimeout,
+            Ok(resp) => CompileResult::Done(resp.text().await.unwrap_or_default()),
+            Err(_) => CompileResult::ColdStartTimeout,
+        }
+    })?;
 
     {
-        let elapsed = elapsed.clone();
-        let is_loading = *loading;
-        use_effect_with(is_loading, move |is_loading| {
-            let _interval = is_loading.then(|| {
-                let counter = Rc::new(Cell::new(0u32));
-                Interval::new(1_000, {
-                    let counter = counter.clone();
-                    let elapsed = elapsed.clone();
-                    move || {
-                        let next = counter.get() + 1;
-                        counter.set(next);
-                        elapsed.set(next);
-                    }
-                })
-            });
-            move || drop(_interval)
+        let action_button_state = action_button_state.clone();
+        use_effect(move || {
+            action_button_state.dispatch(ActionButtonState::Enabled);
         });
     }
 
-    let onload = {
-        let loading = loading.clone();
-        move |_| {
-            loading.set(false);
-            action_button_state.dispatch(ActionButtonState::Enabled);
+    Ok(match &*result {
+        CompileResult::Done(html_content) => {
+            html! { <iframe srcdoc={html_content.clone()} class="w-full h-full" /> }
         }
-    };
-
-    let classes = classes!(
-        "w-full",
-        "h-full",
-        if *loading { "invisible" } else { "visible" }
-    );
-
-    html! {
-        <>
-            if *loading {
+        CompileResult::ColdStartTimeout => {
+            html! {
                 <div class="h-full bg-gray-600 flex items-center justify-center">
-                    <div class="text-gray-200 text-lg flex flex-col items-center gap-2">
-                        <span class="animate-spin inline-block w-8 h-8 border-[3px] border-gray-200 border-t-transparent rounded-full"></span>
-                        <span>{format!("waiting for the backend service... {}s", *elapsed)}</span>
+                    <div class="text-gray-200 flex flex-col items-center gap-3 max-w-md text-center">
+                        <span class="text-xl font-semibold">{"Backend service is waking up"}</span>
+                        <span class="text-gray-400">{"The service was asleep and timed out on the first request. It should be ready now."}</span>
+                        <span class="text-gray-300">{"Hit Run again."}</span>
                     </div>
                 </div>
             }
-            <iframe src={AttrValue::from((*src).clone())} {onload} class={classes} />
-        </>
+        }
+    })
+}
+
+#[component]
+pub fn CompileTimer() -> Html {
+    let elapsed = use_state(|| 0u32);
+
+    {
+        let elapsed = elapsed.clone();
+        use_effect_with((), move |_| {
+            let counter = Rc::new(Cell::new(0u32));
+            let interval = Interval::new(1_000, {
+                let counter = counter.clone();
+                let elapsed = elapsed.clone();
+                move || {
+                    let next = counter.get() + 1;
+                    counter.set(next);
+                    elapsed.set(next);
+                }
+            });
+            move || drop(interval)
+        });
+    }
+
+    html! {
+        <div class="h-full bg-gray-600 flex items-center justify-center">
+            <div class="text-gray-200 text-lg flex flex-col items-center gap-2">
+                <span class="animate-spin inline-block w-8 h-8 border-[3px] border-gray-200 border-t-transparent rounded-full"></span>
+                <span>{format!("waiting for the backend service... {}s", *elapsed)}</span>
+            </div>
+        </div>
     }
 }

services/backend/src/main.rs

@@ -13,6 +13,7 @@ use tokio::net::TcpListener;
 use tokio::process::Command;
 use tower::ServiceBuilder;
 use tower::limit::GlobalConcurrencyLimitLayer;
+use tower_http::cors::CorsLayer;
 use tower_http::trace::TraceLayer;
 use tracing::{debug, error, info};
 
@@ -165,7 +166,9 @@ async fn main() {
         .layer(GlobalConcurrencyLimitLayer::new(1))
         .layer(TraceLayer::new_for_http());
 
-    let app = Router::new().nest("/api", api);
+    let app = Router::new()
+        .nest("/api", api)
+        .layer(CorsLayer::permissive());
 
     let addr = format!("0.0.0.0:{}", *PORT);
     let listener = TcpListener::bind(&addr).await.unwrap();