refactor: background removal

.idea/workspace.xml

@@ -4,13 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: trim video">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: background removal">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/png/remove-background/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/png/remove-background/meta.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/remove-background/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/remove-background/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -345,14 +342,6 @@
       <workItem from="1741567442768" duration="14127000" />
       <workItem from="1741971589699" duration="371000" />
     </task>
-    <task id="LOCAL-00116" summary="chore: style buttons">
-      <option name="closed" value="true" />
-      <created>1740490919407</created>
-      <option name="number" value="00116" />
-      <option name="presentableId" value="LOCAL-00116" />
-      <option name="project" value="LOCAL" />
-      <updated>1740490919407</updated>
-    </task>
     <task id="LOCAL-00117" summary="chore: style">
       <option name="closed" value="true" />
       <created>1740491274739</created>
@@ -737,7 +726,15 @@
       <option name="project" value="LOCAL" />
       <updated>1742960931740</updated>
     </task>
-    <option name="localTasksCounter" value="165" />
+    <task id="LOCAL-00165" summary="feat: background removal">
+      <option name="closed" value="true" />
+      <created>1742961898820</created>
+      <option name="number" value="00165" />
+      <option name="presentableId" value="LOCAL-00165" />
+      <option name="project" value="LOCAL" />
+      <updated>1742961898820</updated>
+    </task>
+    <option name="localTasksCounter" value="166" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -784,7 +781,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: jakarta font" />
     <MESSAGE value="chore: img" />
     <MESSAGE value="docs: readme" />
     <MESSAGE value="feat: remove duplicate lines" />
@@ -809,7 +805,8 @@
     <MESSAGE value="fix: missing meta" />
     <MESSAGE value="feat: trim video" />
     <MESSAGE value="refactor: file inputs" />
-    <option name="LAST_COMMIT_MESSAGE" value="refactor: file inputs" />
+    <MESSAGE value="feat: background removal" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: background removal" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/result/ToolFileResult.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, CircularProgress, Typography } from '@mui/material';
 import React, { useContext } from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
@@ -9,11 +9,15 @@ import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 export default function ToolFileResult({
   title = 'Result',
   value,
-  extension
+  extension,
+  loading,
+  loadingText
 }: {
   title?: string;
   value: File | null;
   extension: string;
+  loading?: boolean;
+  loadingText?: string;
 }) {
   const [preview, setPreview] = React.useState<string | null>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -83,44 +87,62 @@ export default function ToolFileResult({
           bgcolor: 'white'
         }}
       >
-        {preview && (
+        {loading ? (
           <Box
-            width={'100%'}
-            height={'100%'}
             sx={{
               display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundImage: `url(${greyPattern})`
+              height: '100%'
             }}
           >
-            {fileType === 'image' && (
+            <CircularProgress />
-              <img
+            <Typography variant="body2" sx={{ mt: 2 }}>
-                src={preview}
+              {loadingText}... This may take a moment.
-                alt="Result"
+            </Typography>
-                style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
-              />
-            )}
-            {fileType === 'video' && (
-              <video
-                src={preview}
-                controls
-                style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
-              />
-            )}
-            {fileType === 'audio' && (
-              <audio
-                src={preview}
-                controls
-                style={{ width: '100%', maxWidth: '500px' }}
-              />
-            )}
-            {fileType === 'unknown' && (
-              <Box sx={{ padding: 2, textAlign: 'center' }}>
-                File processed successfully. Click download to save the result.
-              </Box>
-            )}
           </Box>
+        ) : (
+          preview && (
+            <Box
+              width={'100%'}
+              height={'100%'}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundImage: `url(${greyPattern})`
+              }}
+            >
+              {fileType === 'image' && (
+                <img
+                  src={preview}
+                  alt="Result"
+                  style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
+                />
+              )}
+              {fileType === 'video' && (
+                <video
+                  src={preview}
+                  controls
+                  style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
+                />
+              )}
+              {fileType === 'audio' && (
+                <audio
+                  src={preview}
+                  controls
+                  style={{ width: '100%', maxWidth: '500px' }}
+                />
+              )}
+              {fileType === 'unknown' && (
+                <Box sx={{ padding: 2, textAlign: 'center' }}>
+                  File processed successfully. Click download to save the
+                  result.
+                </Box>
+              )}
+            </Box>
+          )
         )}
       </Box>
       <ResultFooter

src/pages/tools/image/png/remove-background/index.tsx

@@ -69,30 +69,13 @@ export default function RemoveBackgroundFromPng({ title }: ToolComponentProps) {
         />
       }
       resultComponent={
-        <>
+        <ToolFileResult
-          {isProcessing ? (
+          title={'Transparent PNG'}
-            <Box
+          value={result}
-              sx={{
+          extension={'png'}
-                display: 'flex',
+          loading={isProcessing}
-                flexDirection: 'column',
+          loadingText={'Removing background'}
-                alignItems: 'center',
+        />
-                justifyContent: 'center',
-                minHeight: '200px'
-              }}
-            >
-              <CircularProgress />
-              <Typography variant="body2" sx={{ mt: 2 }}>
-                Removing background... This may take a moment.
-              </Typography>
-            </Box>
-          ) : (
-            <ToolFileResult
-              title={'Transparent PNG'}
-              value={result}
-              extension={'png'}
-            />
-          )}
-        </>
       }
       toolInfo={{
         title: 'Remove Background from PNG',