From ea8561ca19f32755df1b8cf0d88fcce74f8b33ab Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Feb 2023 13:06:27 -0600
Subject: [PATCH] ChatUpload: add blurhash

---
 app/soapbox/features/chats/components/chat-upload.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-upload.tsx b/app/soapbox/features/chats/components/chat-upload.tsx
index 38b664e81..f10fa520c 100644
--- a/app/soapbox/features/chats/components/chat-upload.tsx
+++ b/app/soapbox/features/chats/components/chat-upload.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Blurhash from 'soapbox/components/blurhash';
 import { Icon } from 'soapbox/components/ui';
 
 import type { Attachment } from 'soapbox/types/entities';
@@ -12,13 +13,15 @@ interface IChatUpload {
 /** An attachment uploaded to the chat composer, before sending. */
 const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   return (
-    <div className='relative inline-block'>
+    <div className='relative inline-block rounded-lg overflow-hidden isolate'>
+      <Blurhash hash={attachment.blurhash} className='absolute inset-0 w-full h-full -z-10' />
+
       <div className='absolute right-[6px] top-[6px]'>
         <RemoveButton onClick={onDelete} />
       </div>
 
       <img
-        className='w-24 h-24 rounded-lg'
+        className='w-24 h-24'
         key={attachment.id}
         src={attachment.url}
         alt=''