pending changes indication for device and component changes

src/interactions/InteractionsOverview.tsx

@@ -4,7 +4,6 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  CircularProgress,
   darken,
   Grid2 as Grid,
   IconButton,
@@ -15,7 +14,8 @@ import {
   Tooltip,
   Typography
 } from "@mui/material";
-import { CheckCircleOutline, Settings } from "@mui/icons-material";
+import { Settings } from "@mui/icons-material";
+import PendingChangesIndicator from "common/PendingChangesIndicator";
 import { useInteractionsAPI, usePrevious, useSnackbar } from "hooks";
 import { cloneDeep } from "lodash";
 import { Component, Device, Interaction } from "models";
@@ -329,17 +329,11 @@ export default function InteractionsOverview(props: Props) {
             title={interactionResultText(interaction, sink)}
             subheader={
               statusText ? (
-                <Grid container spacing={0.5} alignItems="center">
-                  {isPending && <CircularProgress size={10} thickness={5} color="inherit" />}
-                  {isAccepted && (
-                    <CheckCircleOutline
-                      sx={{ fontSize: 13, color: "var(--status-ok)" }}
-                    />
-                  )}
-                  <Grid>
-                    {statusText}
-                  </Grid>
-                </Grid>
+                <PendingChangesIndicator
+                  pending={isPending}
+                  accepted={isAccepted}
+                  text={statusText}
+                />
               ) : ""}
             subheaderTypographyProps={{ variant: "caption" }}
             action={action}