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,7 +87,23 @@ export default function ToolFileResult({
           bgcolor: 'white'
         }}
       >
-        {preview && (
+        {loading ? (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100%'
+            }}
+          >
+            <CircularProgress />
+            <Typography variant="body2" sx={{ mt: 2 }}>
+              {loadingText}... This may take a moment.
+            </Typography>
+          </Box>
+        ) : (
+          preview && (
             <Box
               width={'100%'}
               height={'100%'}
@@ -117,10 +137,12 @@ export default function ToolFileResult({
               )}
               {fileType === 'unknown' && (
                 <Box sx={{ padding: 2, textAlign: 'center' }}>
-                File processed successfully. Click download to save the result.
+                  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={
-        <>
-          {isProcessing ? (
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                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'}
+          loading={isProcessing}
+          loadingText={'Removing background'}
         />
-          )}
-        </>
       }
       toolInfo={{
         title: 'Remove Background from PNG',