Loader is not in the correct shape and change delete icon

src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react'
+import { render, screen, within, fireEvent } from '@testing-library/react'
 import React from 'react'
 import { TWITTER_LINK, sourcesMapper } from '~/components/SourcesTableModal/SourcesView/constants'
 import { RSS, TWITTER_HANDLE, YOUTUBE_CHANNEL } from '~/constants'
@@ -55,4 +55,40 @@ describe('Table Component Tests', () => {
     expect(sourceTypeCell).toBeInTheDocument()
     expect(sourceCell).toBeInTheDocument()
   })
+
+  it('should display loader when clicking on delete icon', async () => {
+    const isEdit = true
+
+    render(<Table canEdit={isEdit} data={mockData} />)
+
+    const deleteIcon = screen.getByTestId('delete-icon-2')
+
+    fireEvent.click(deleteIcon)
+
+    const confirmDelete = await screen.findByText('Yes')
+
+    fireEvent.click(confirmDelete)
+
+    const loader = await screen.findByTestId('delete-loader-2')
+
+    expect(loader).toBeInTheDocument()
+  })
+
+  it('should display loader when clicking on edit icon and then check icon', async () => {
+    const isEdit = true
+
+    render(<Table canEdit={isEdit} data={mockData} />)
+
+    const editIcon = screen.getByTestId('edit-icon-1')
+
+    fireEvent.click(editIcon)
+
+    const checkIcon = screen.getByTestId('check-icon-1')
+
+    fireEvent.click(checkIcon)
+
+    const loader = await screen.findByTestId('edit-loader-1')
+
+    expect(loader).toBeInTheDocument()
+  })
 })

src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx

@@ -1,6 +1,6 @@
 import { Table as MaterialTable, TableBody, TableRow } from '@mui/material'
 import React, { useState } from 'react'
-import { MdCheck, MdClose, MdDeleteForever, MdOutlineModeEdit } from 'react-icons/md'
+import { MdCheck, MdClose, MdOutlineModeEdit } from 'react-icons/md'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { BaseTextInput } from '~/components/BaseTextInput'
@@ -15,6 +15,7 @@ import { RadarRequest, Sources } from '~/types'
 import { colors } from '~/utils/colors'
 import { StyledTableCell, StyledTableHead, StyledTableRow } from '../../common'
 import { TWITTER_LINK, sourcesMapper } from '../../constants'
+import DeleteIcon from '~/components/Icons/DeleteIcon'
 
 type Props = {
   data: Sources[] | undefined
@@ -121,11 +122,17 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
               <StyledTableCell align="left">
                 <div className="delete-wrapper" id={`delete-${i.source}`}>
                   {loadingId === i.ref_id ? (
-                    <ClipLoader color={colors.white} />
+                    <ClipLoaderWrapper data-testid={`delete-loader-${i.ref_id}`}>
+                      <ClipLoader color={colors.white} size={16} />
+                    </ClipLoaderWrapper>
                   ) : (
-                    <ConfirmPopover message="Are you sure ?" onConfirm={() => handleRemove(i.ref_id)}>
-                      <IconWrapper className="centered">
-                        <MdDeleteForever />
+                    <ConfirmPopover
+                      data-testid={`delete-icon-${i.ref_id}`}
+                      message="Are you sure?"
+                      onConfirm={() => handleRemove(i.ref_id)}
+                    >
+                      <IconWrapper className="centered" data-testid={`delete-icon-${i.ref_id}`}>
+                        <DeleteIcon />
                       </IconWrapper>
                     </ConfirmPopover>
                   )}
@@ -180,15 +187,21 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
   return (
     <div>
       {editing ? (
-        <EditModeCellWrapper direction="row">
+        <EditModeCellWrapper align="center" direction="row">
           <BaseTextInput
             className="editable-cell__input"
             name="cell-input"
             onChange={(val) => setName(val)}
             value={name}
           />
           <IconWrapper align="center" justify="center">
-            {loading ? <ClipLoader /> : <MdCheck onClick={handleSave} />}
+            {loading ? (
+              <ClipLoaderWrapper data-testid={`edit-loader-${id}`}>
+                <ClipLoader color={colors.white} size={12} />
+              </ClipLoaderWrapper>
+            ) : (
+              <MdCheck data-testid={`check-icon-${id}`} onClick={handleSave} />
+            )}
           </IconWrapper>
           <IconWrapper align="center" className="secondary" justify="center" onClick={() => setEditing(false)}>
             <MdClose />
@@ -198,7 +211,7 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
         <EditableCellWrapper direction="row">
           {children}
           <IconWrapper onClick={() => setEditing(true)}>
-            <MdOutlineModeEdit size={20} />
+            <MdOutlineModeEdit data-testid={`edit-icon-${id}`} size={20} />
           </IconWrapper>
         </EditableCellWrapper>
       )}
@@ -231,14 +244,19 @@ const IconWrapper = styled(Flex)`
   border-radius: 50%;
   cursor: pointer;
   background: transparent;
-  color: ${colors.lightBlue500};
+  align-items: center;
+  justify-content: center;
   &.centered {
     margin: 0 auto;
   }
 
   & + & {
     margin-left: 4px;
   }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
 `
 
 const NoResultWrapper = styled(Flex)`
@@ -283,3 +301,9 @@ const StyledLink = styled.a`
     color: ${colors.white};
   }
 `
+
+const ClipLoaderWrapper = styled(Flex)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`