feat(frontend): refine loading marker

frontend/src/components/CommandQueue.tsx

@@ -4,7 +4,7 @@ import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";
 
 const CommandQueue: Component = () => {
-  const [commands, { refetch }] = createResource(commandsApi.list);
+  const [commands, { refetch }] = createResource("unverified", commandsApi.list);
 
   const updateCommandStatus = async (id: number, status: string) => {
     try {
@@ -25,7 +25,7 @@ const CommandQueue: Component = () => {
       <h2 class="text-2xl font-semibold">Command Queue</h2>
 
       <Card>
-        <Show when={!commands.loading} fallback={<div class="p-4">Loading...</div>}>
+        <Show when={!commands.loading} fallback={<div class="p-8 text-center text-gray-500">Loading...</div>}>
           <For
             each={commands()}
             fallback={<div class="p-8 text-center text-gray-500">No commands in queue</div>}

frontend/src/components/RequestLogs.tsx

@@ -124,7 +124,7 @@ const RequestLogs: Component = () => {
                   when={!logsData.loading}
                   fallback={
                     <tr>
-                      <td colspan="3" class="text-center py-4">
+                      <td colspan="3" class="p-8 text-center text-gray-500">
                         Loading...
                       </td>
                     </tr>

frontend/src/components/RulesList.tsx

@@ -181,7 +181,7 @@ const RulesList: Component = () => {
                 when={!rules.loading}
                 fallback={
                   <tr>
-                    <td colspan="4" class="text-center py-4">
+                    <td colspan="4" class="p-8 text-center text-gray-500">
                       Loading...
                     </td>
                   </tr>