fix: remove symbols in tool description + add skeleton UI (#412)

* fix: remove parenthesis symbols * fix: remove parenthesis symbols * fix: add skeleton loader in tool details
dcSpark · Aug 20, 2024 · efe1927 · efe1927
1 parent 2b1adb0
commit efe1927
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/apps/shinkai-desktop/src/components/tools/js-tool.tsx b/apps/shinkai-desktop/src/components/tools/js-tool.tsx
@@ -128,8 +128,8 @@ export default function JsTool({
           .filter((item) => !!item)
           .map(({ label, value }) => (
             <div className="flex flex-col gap-1 py-4" key={label}>
-              <span className="text-gray-80 text-xs">{label}</span>(
-              <span className="text-sm text-white">{value}</span>)
+              <span className="text-gray-80 text-xs">{label}</span>
+              <span className="text-sm text-white">{value}</span>
             </div>
           ))}
 

diff --git a/apps/shinkai-desktop/src/components/tools/tool-details.tsx b/apps/shinkai-desktop/src/components/tools/tool-details.tsx
@@ -4,8 +4,10 @@ import {
   WorkflowShinkaiTool,
 } from '@shinkai_network/shinkai-message-ts/models/SchemaTypes';
 import { useGetTool } from '@shinkai_network/shinkai-node-state/lib/queries/getTool/useGetTool';
+import { Skeleton } from '@shinkai_network/shinkai-ui';
 import { useParams } from 'react-router-dom';
 
+import { SubpageLayout } from '../../pages/layout/simple-layout';
 import { useAuth } from '../../store/auth';
 import JsTool from './js-tool';
 import WorkflowTool from './workflow-tool';
@@ -23,7 +25,7 @@ export default function ToolDetails() {
 
   const { toolKey } = useParams();
 
-  const { data, isSuccess } = useGetTool({
+  const { data, isSuccess, isPending } = useGetTool({
     nodeAddress: auth?.node_address ?? '',
     toolKey: toolKey ?? '',
     shinkaiIdentity: auth?.shinkai_identity ?? '',
@@ -38,6 +40,26 @@ export default function ToolDetails() {
   const tool = data?.content[0] as ShinkaiTool;
   const isEnabled = data?.content[1] as boolean;
 
+  if (isPending) {
+    return (
+      <SubpageLayout
+        alignLeft
+        title={<Skeleton className="h-6 w-40 rounded-md bg-gray-300" />}
+      >
+        <div className="flex flex-col gap-8">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-6 w-32 rounded-md bg-gray-300" />
+            <Skeleton className="h-6 w-16 rounded-md bg-gray-300" />
+          </div>
+          <Skeleton className="h-20 w-full shrink-0 rounded-md bg-gray-300" />
+          <Skeleton className="h-20 w-full shrink-0 rounded-md bg-gray-300" />
+          <Skeleton className="h-20 w-full shrink-0 rounded-md bg-gray-300" />
+          <Skeleton className="h-20 w-full shrink-0 rounded-md bg-gray-300" />
+        </div>
+      </SubpageLayout>
+    );
+  }
+
   if (isSuccess && isWorkflowShinkaiTool(tool)) {
     return <WorkflowTool isEnabled={isEnabled} tool={tool} />;
   } else if (isSuccess && isJSShinkaiTool(tool)) {

diff --git a/apps/shinkai-desktop/src/pages/tools.tsx b/apps/shinkai-desktop/src/pages/tools.tsx
@@ -68,7 +68,7 @@ export const Tools = () => {
   const { mutateAsync: updateTool } = useUpdateTool();
 
   return (
-    <SimpleLayout title={'Shinkai Tools'}>
+    <SimpleLayout classname="max-w-3xl" title={'Shinkai Tools'}>
       <ScrollArea className="pr-4 [&>div>div]:!block">
         <div className="relative mb-4 flex h-10 w-full items-center">
           <Input