some cleanup

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/app.tsx

@@ -1,48 +1,54 @@
-import { createSignal, For } from "solid-js";
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
-import { createEffect } from 'solid-js'
 import "./app.css";
 
+const router = createRouter("http://127.0.0.1:8080")
+// Changes made elsewhere (another tab, the mobile app) show up within this interval.
+const syncIntervalMs = 2000
+
 export default function App() {
-  const router = createRouter("http://127.0.0.1:8080")
   const [todos, setTodos] = createSignal<Todo[]>([]);
+  const [offline, setOffline] = createSignal(false);
   const [todoToCreateTask, setTodoToCreateTask] = createSignal<string>("");
   const fetchTodos = () => {
     router.todos.listTodos({}).then((r) => {
-      setTodos(r.todos)
-    })
+      setOffline(false)
+      // Polling returns the same list most of the time; keep the old array so <For> keeps its rows.
+      if (JSON.stringify(todos()) !== JSON.stringify(r.todos)) setTodos(r.todos)
+    }).catch(() => setOffline(true))
   }
-  createEffect(() => {
+  onMount(() => {
     fetchTodos()
+    const interval = setInterval(fetchTodos, syncIntervalMs)
+    onCleanup(() => clearInterval(interval))
   })
 
-  const setTodoDone =  (id: string, task: string) => {
-    return async (event : Event & { currentTarget: HTMLInputElement }) => {
-      await router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } })
-      fetchTodos()
+  const setTodoDone = (id: string, task: string) => {
+    return (event: Event & { currentTarget: HTMLInputElement }) => {
+      router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } }).then(fetchTodos, () => setOffline(true))
     }
   }
 
   const deleteTodo = (id: string) => {
-    return async () => {
-      await router.todos.deleteTodo({ todo: { id } })
-      fetchTodos()
+    return () => {
+      router.todos.deleteTodo({ todo: { id } }).then(fetchTodos, () => setOffline(true))
     }
   }
 
   const createTodo = () => {
-    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task: todoToCreateTask() } }).then((r) => {
-      console.log(r)
+    const task = todoToCreateTask().trim()
+    if (!task) return
+    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task } }).then(() => {
+      setTodoToCreateTask("")
       fetchTodos()
-    }).catch((e) => {
-      console.log(e)
-    })
+    }, () => setOffline(true))
   }
 
   return (
     <div>
       <p>Create Todo</p>
-      <input value={todoToCreateTask()} onInput={(e) => setTodoToCreateTask(e.currentTarget.value)} type="text"/>
+      <Show when={offline()}><p style={{ color: "#d32f2f" }}>Can't reach the API, retrying…</p></Show>
+      <input value={todoToCreateTask()} onInput={(e) => setTodoToCreateTask(e.currentTarget.value)} type="text" placeholder="What needs to be done?"/>
       <button onclick={createTodo}> create </button>
       <For each={todos()}>
       {(item:Todo) =>