Introduce ItemPreview loaders

v3xlabs · Dec 19, 2024 · e990d55 · e990d55
1 parent 0dad3fd
commit e990d55
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/engine/Cargo.lock b/engine/Cargo.lock
diff --git a/engine/Cargo.toml b/engine/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "v3x-property-engine"
-version = "0.0.4"
+version = "0.0.5"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

diff --git a/web/src/api/item/index.ts b/web/src/api/item/index.ts
@@ -11,17 +11,9 @@ import { queryClient } from '@/util/query';
 
 import { useAuth } from '../auth';
 import { apiRequest, BASE_URL, getHttp } from '../core';
-import { paths } from '../schema.gen';
-
-export type ApiItemResponse = {
-    item_id: string;
-    owner_id: number;
-    product_id: number;
-    name?: string;
-    media?: number[];
-    created?: string;
-    modified?: string;
-};
+import { components, paths } from '../schema.gen';
+
+export type ApiItemResponse = components['schemas']['Item'];
 
 export const getItemById = (item_id: string) =>
     queryOptions({

diff --git a/web/src/components/item/ItemPreview.tsx b/web/src/components/item/ItemPreview.tsx
@@ -222,6 +222,45 @@ const ItemPreviewLarge: FC<{
     );
 };
 
+export const ItemPreviewLargeSkeleton: FC<{
+    formattedItemId?: string;
+}> = ({ formattedItemId }) => {
+    return (
+        <div
+            className={clsx(
+                'p-2 border cursor-pointer rounded-md flex items-start gap-4 hover:outline outline-1 outline-offset-1 outline-neutral-200'
+            )}
+            data-testid="item-preview-large"
+        >
+            <div className="size-32 bg-neutral-200 rounded-md animate-pulse" />
+            {/* <AvatarHolder
+                item_id={item?.item_id}
+                image={mediaUrl}
+                alt={item?.name || UNKNOWN_ITEM}
+                size="large"
+                key={`media-${item?.item_id}`}
+                randomHue={randomHue}
+            /> */}
+            <div className="flex flex-col -space-y-1.5 justify-center overflow-hidden grow py-4">
+                <div className="text-base overflow-hidden text-ellipsis whitespace-nowrap">
+                    {UNKNOWN_ITEM}
+                </div>
+                {formattedItemId && (
+                    <div className="text-sm">#{formattedItemId}</div>
+                )}
+                {/* {logos && logos.length > 0 && (
+                    <ul className="flex items-center gap-2 py-2">{logos}</ul>
+                )} */}
+            </div>
+            <div className="h-full flex">
+                {/* {item?.owner_id && (
+                    <UserProfile user_id={item.owner_id} variant="compact" />
+                )} */}
+            </div>
+        </div>
+    );
+};
+
 export const ItemPreview: FC<Properties> = ({ item_id, variant }) => {
     const { data: item, isLoading, isError, error } = useItemById(item_id);
     const { data: media } = useItemMedia(item_id);
@@ -254,7 +293,11 @@ export const ItemPreview: FC<Properties> = ({ item_id, variant }) => {
     })();
 
     if (isLoading) {
-        return <div>Loading...</div>;
+        return match({ variant })
+            .with({ variant: 'large' }, () => (
+                <ItemPreviewLargeSkeleton formattedItemId={formattedItemId} />
+            ))
+            .otherwise(() => <div>Loading...</div>);
     }
 
     if (isError && error instanceof ApiError && error.status === 403) {