Merge pull request #1631 from rockingrohit9639/fix/asset-imager-loader

fix asset image loader positioning issue
Shelf-nu · Feb 7, 2025 · e2afac7 · e2afac7
2 parents bc5ff20 + 7768504
commit e2afac7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/app/components/assets/asset-image.tsx b/app/components/assets/asset-image.tsx
@@ -71,30 +71,32 @@ export const AssetImage = ({
 
   return (
     <>
-      <>
+      <div className={tw("relative overflow-hidden", className)}>
         {isLoading && (
           <div
             className={tw(
-              "absolute inset-0 top-[6px] flex items-center justify-center bg-gray-100",
-              "transition-opacity", // Fallback animation
-              className
+              "absolute inset-0 flex items-center justify-center bg-gray-100",
+              "transition-opacity" // Fallback animation
             )}
           >
-            <Spinner className="[&_.spinner]:before:border-t-gray-400 " />
+            <Spinner className="[&_.spinner]:before:border-t-gray-400" />
           </div>
         )}
 
         <img
           onClick={withPreview ? handleOpenDialog : undefined}
           src={url}
-          className={tw(withPreview && "cursor-pointer", className)}
+          className={tw(
+            "size-full object-cover",
+            withPreview && "cursor-pointer"
+          )}
           alt={alt}
           onLoad={handleImageLoad}
           loading="lazy"
           decoding="async"
           {...rest}
         />
-      </>
+      </div>
       {withPreview && (
         <DialogPortal>
           <Dialog

diff --git a/app/components/assets/assets-index/advanced-asset-columns.tsx b/app/components/assets/assets-index/advanced-asset-columns.tsx
@@ -130,7 +130,7 @@ export function AdvancedIndexColumn({
             modeIsAdvanced && freezeColumn ? freezeColumnClassNames.name : ""
           )}
           value={
-            <div className={tw("flex items-center gap-2 ")}>
+            <div className="flex items-center gap-2">
               {showAssetImage ? (
                 <AssetImage
                   asset={{

diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
@@ -377,7 +377,7 @@ const ListAssetContent = ({ item }: { item: AssetsFromViewItem }) => {
           to={`/assets/${item.id}`}
         >
           <div className="flex items-center gap-3">
-            <div className="relative flex size-12 shrink-0 items-center justify-center">
+            <div className="flex size-12 shrink-0 items-center justify-center">
               <AssetImage
                 asset={{
                   assetId: item.id,

diff --git a/app/routes/_layout+/bookings.$bookingId.tsx b/app/routes/_layout+/bookings.$bookingId.tsx
@@ -603,7 +603,7 @@ export default function BookingEditPage() {
   return shouldRenderOutlet ? (
     <Outlet />
   ) : (
-    <>
+    <div className="relative">
       <Header
         title={hasName ? name : booking.name}
         subHeading={
@@ -621,6 +621,6 @@ export default function BookingEditPage() {
         <BookingPageContent />
         <ContextualModal />
       </div>
-    </>
+    </div>
   );
 }