Add xs size to RoundPlaceholder (#4694)

app/assets/stylesheets/application.bootstrap.scss

@@ -632,15 +632,12 @@ input[type="range"]:focus::-moz-range-thumb {
   min-width: $column-lg-width
 }
 
-//.xl-td-placeholder {
-//  min-width: 300px;
-//
-//  @include media-breakpoint-down(xxl) {
-//    width: 150px;
-//  }
-//}
-
 // Circles & Avatars
+.xs-circle {
+  width: 20px;
+  height: 20px;
+}
+
 .small-circle {
   width: 40px;
   height: 40px;

app/javascript/components/admin/roles/RoleRowPlaceHolder.jsx

@@ -8,7 +8,7 @@ export default function RoleRowPlaceHolder() {
     <tr className="align-middle border border-2 cursor-pointer">
       <td colSpan={12} className="py-4">
         <Stack direction="horizontal">
-          <RoundPlaceholder radius="20px" className="mx-1" />
+          <RoundPlaceholder size="xs" className="mx-1" />
           <Stack>
             <Placeholder width={3} size="lg" />
           </Stack>