diff --git a/packages/strapi-design-system/src/Button/Button.js b/packages/strapi-design-system/src/Button/Button.js
index 9faec700d..3df9f4b9c 100644
--- a/packages/strapi-design-system/src/Button/Button.js
+++ b/packages/strapi-design-system/src/Button/Button.js
@@ -20,6 +20,7 @@ const rotation = keyframes`
 
 const LoadingWrapper = styled.div`
   animation: ${rotation} 2s infinite linear;
+  will-change: transform;
 `;
 
 const BoxFullHeight = styled(Box)`
diff --git a/packages/strapi-design-system/src/Loader/Loader.js b/packages/strapi-design-system/src/Loader/Loader.js
index d1b9f9015..885c5bd2a 100644
--- a/packages/strapi-design-system/src/Loader/Loader.js
+++ b/packages/strapi-design-system/src/Loader/Loader.js
@@ -15,6 +15,7 @@ const rotation = keyframes`
 
 const LoaderImg = styled.img`
   animation: ${rotation} 1s infinite linear;
+  will-change: transform;
   ${({ small, theme }) => small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
 `;
 
diff --git a/packages/strapi-design-system/src/TextButton/TextButton.js b/packages/strapi-design-system/src/TextButton/TextButton.js
index 3a2e0ea8a..88dd5f7ed 100644
--- a/packages/strapi-design-system/src/TextButton/TextButton.js
+++ b/packages/strapi-design-system/src/TextButton/TextButton.js
@@ -1,11 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+import Loader from '@strapi/icons/Loader';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
 import { Flex } from '../Flex';
 import { buttonFocusStyle } from '../themes/utils';
 
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+
+const LoadingWrapper = styled.div`
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+
 const TextButtonWrapper = styled(Flex)`
   background: transparent;
   border: none;
@@ -29,27 +44,43 @@ const TextButtonWrapper = styled(Flex)`
   ${buttonFocusStyle}
 `;
 
-export const TextButton = React.forwardRef(({ children, startIcon, endIcon, onClick, disabled, ...props }, ref) => {
-  const handleClick = onClick && !disabled ? onClick : undefined;
+export const TextButton = React.forwardRef(
+  ({ children, startIcon, endIcon, onClick, disabled, loading, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : undefined;
+    const isDisabled = disabled || loading;
 
-  return (
-    <TextButtonWrapper ref={ref} aria-disabled={disabled} onClick={handleClick} as="button" type="button" {...props}>
-      {startIcon && (
-        <Box as="span" paddingRight={2} aria-hidden={true}>
-          {startIcon}
-        </Box>
-      )}
-      <Typography variant="pi" textColor={disabled ? 'neutral600' : 'primary600'}>
-        {children}
-      </Typography>
-      {endIcon && (
-        <Box as="span" paddingLeft={2} aria-hidden={true}>
-          {endIcon}
-        </Box>
-      )}
-    </TextButtonWrapper>
-  );
-});
+    return (
+      <TextButtonWrapper
+        ref={ref}
+        aria-disabled={isDisabled}
+        onClick={handleClick}
+        as="button"
+        type="button"
+        {...props}
+      >
+        {(startIcon || loading) && (
+          <Box as="span" paddingRight={2} aria-hidden={true}>
+            {loading ? (
+              <LoadingWrapper>
+                <Loader />
+              </LoadingWrapper>
+            ) : (
+              startIcon
+            )}
+          </Box>
+        )}
+        <Typography variant="pi" textColor={isDisabled ? 'neutral600' : 'primary600'}>
+          {children}
+        </Typography>
+        {endIcon && (
+          <Box as="span" paddingLeft={2} aria-hidden={true}>
+            {endIcon}
+          </Box>
+        )}
+      </TextButtonWrapper>
+    );
+  },
+);
 
 TextButton.displayName = 'TextButton';
 
@@ -57,6 +88,7 @@ TextButton.defaultProps = {
   disabled: false,
   startIcon: undefined,
   endIcon: undefined,
+  loading: false,
   onClick: undefined,
 };
 
@@ -64,6 +96,7 @@ TextButton.propTypes = {
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
   endIcon: PropTypes.element,
+  loading: PropTypes.bool,
   onClick: PropTypes.func,
   startIcon: PropTypes.element,
 };
diff --git a/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx b/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx
index cc951ff81..d4dee6bfe 100644
--- a/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx
+++ b/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx
@@ -39,6 +39,13 @@ Depending on the permissions a user have or the status of an action, a TextButto
         Click on me
       </TextButton>
     </div>
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="disabled">
     <div>
       <TextButton disabled startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
         Disabled TextButton
@@ -47,6 +54,18 @@ Depending on the permissions a user have or the status of an action, a TextButto
   </Story>
 </Canvas>
 
+## Loading
+
+<Canvas>
+  <Story name="loading">
+    <div>
+      <TextButton loading startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
+        Loading
+      </TextButton>
+    </div>
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={TextButton} />
diff --git a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap
index 99d49b564..8638e3b9f 100644
--- a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap
+++ b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap
@@ -5271,6 +5271,7 @@ exports[`Storyshots Design System/Components/Button icons 1`] = `
 .c14 {
   -webkit-animation: gzYjWD 2s infinite linear;
   animation: gzYjWD 2s infinite linear;
+  will-change: transform;
 }
 
 .c9 {
@@ -26355,6 +26356,7 @@ exports[`Storyshots Design System/Components/Loader base 1`] = `
 .c3 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
+  will-change: transform;
 }
 
 <div
@@ -26418,6 +26420,7 @@ exports[`Storyshots Design System/Components/Loader small 1`] = `
 .c3 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
+  will-change: transform;
   width: 24px;
   height: 24px;
 }
@@ -43159,12 +43162,6 @@ exports[`Storyshots Design System/Components/TextButton base 1`] = `
   line-height: 1.33;
 }
 
-.c8 {
-  color: #666687;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
 .c3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -43298,6 +43295,134 @@ exports[`Storyshots Design System/Components/TextButton base 1`] = `
           </span>
         </button>
       </div>
+    </div>
+  </main>
+</div>
+`;
+
+exports[`Storyshots Design System/Components/TextButton disabled 1`] = `
+.c1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c0 {
+  background: #ffffff;
+  padding: 8px;
+}
+
+.c2 {
+  padding: 8px;
+  height: 100%;
+}
+
+.c5 {
+  padding-right: 8px;
+}
+
+.c7 {
+  padding-left: 8px;
+}
+
+.c6 {
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c4 {
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+}
+
+.c4[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c4[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c4 svg {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.625rem;
+}
+
+.c4 svg path {
+  fill: #4945ff;
+}
+
+.c4:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c4:focus-visible {
+  outline: none;
+}
+
+.c4:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+<div
+  class="c0"
+>
+  <main>
+    <div
+      class="c1"
+    >
+      <h1>
+        Storybook story
+      </h1>
+    </div>
+    <div
+      class="c2"
+      height="100%"
+    >
       <div>
         <button
           aria-disabled="true"
@@ -43322,7 +43447,7 @@ exports[`Storyshots Design System/Components/TextButton base 1`] = `
             </svg>
           </span>
           <span
-            class="c8"
+            class="c6"
           >
             Disabled TextButton
           </span>
@@ -43350,6 +43475,193 @@ exports[`Storyshots Design System/Components/TextButton base 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/Components/TextButton loading 1`] = `
+.c1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c0 {
+  background: #ffffff;
+  padding: 8px;
+}
+
+.c2 {
+  padding: 8px;
+  height: 100%;
+}
+
+.c5 {
+  padding-right: 8px;
+}
+
+.c8 {
+  padding-left: 8px;
+}
+
+.c7 {
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c6 {
+  -webkit-animation: gzYjWD 2s infinite linear;
+  animation: gzYjWD 2s infinite linear;
+  will-change: transform;
+}
+
+.c4 {
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+}
+
+.c4[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c4[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c4 svg {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.625rem;
+}
+
+.c4 svg path {
+  fill: #4945ff;
+}
+
+.c4:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c4:focus-visible {
+  outline: none;
+}
+
+.c4:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+<div
+  class="c0"
+>
+  <main>
+    <div
+      class="c1"
+    >
+      <h1>
+        Storybook story
+      </h1>
+    </div>
+    <div
+      class="c2"
+      height="100%"
+    >
+      <div>
+        <button
+          aria-disabled="true"
+          class="c3 c4"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="c5"
+          >
+            <div
+              class="c6"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12.057 18c.552 0 1 .451 1 .997v4.006a1 1 0 01-.941.995l-.059.002c-.552 0-1-.451-1-.997v-4.006a1 1 0 01.941-.995l.06-.002zm-3.06-.736l.055.03c.478.276.64.89.367 1.364l-2.002 3.468a1 1 0 01-1.31.394l-.055-.03a1.002 1.002 0 01-.368-1.363l2.003-3.469a1 1 0 011.31-.394zm7.42.394l2.002 3.468a1 1 0 01-.314 1.331l-.053.033a1.002 1.002 0 01-1.365-.363l-2.003-3.469a1 1 0 01.314-1.33l.054-.034a1.002 1.002 0 011.364.364zm-9.548-2.66l.033.054c.276.478.11 1.091-.364 1.364L3.07 18.42a1 1 0 01-1.331-.314l-.033-.053a1.001 1.001 0 01.364-1.365l3.468-2.003a1 1 0 011.33.314zm11.79-.313l3.468 2.002a1 1 0 01.393 1.31l-.03.055c-.276.478-.89.64-1.363.367l-3.469-2.003a1 1 0 01-.394-1.309l.03-.055c.276-.479.89-.64 1.364-.367zm4.344-3.628a1 1 0 01.995.941l.002.06c0 .551-.451 1-.997 1h-4.006a1 1 0 01-.995-.942L18 12.057c0-.552.451-1 .997-1h4.006zm-18 0a1 1 0 01.995.941l.002.06c0 .551-.451 1-.998 1H.998a1 1 0 01-.996-.942L0 12.057c0-.552.451-1 .998-1h4.004zm17.454-5.059l.033.054c.277.478.11 1.091-.363 1.365l-3.469 2.002a1 1 0 01-1.33-.314l-.034-.053a1.002 1.002 0 01.364-1.365l3.468-2.003a1 1 0 011.331.314zM3.07 5.684l3.468 2.003a1 1 0 01.394 1.31l-.03.055c-.276.478-.89.64-1.364.367L2.07 7.417a1 1 0 01-.394-1.31l.03-.055c.276-.479.89-.64 1.364-.368zm14.926-4.008l.056.03c.478.276.64.89.367 1.364l-2.003 3.468a1 1 0 01-1.309.394l-.055-.03a1.002 1.002 0 01-.367-1.364l2.002-3.468a1 1 0 011.31-.394zm-10.58.394L9.42 5.538a1 1 0 01-.314 1.33l-.053.034a1.002 1.002 0 01-1.365-.364L5.684 3.07a1 1 0 01.314-1.331l.054-.033a1.002 1.002 0 011.365.364zM12.058 0c.552 0 1 .451 1 .998v4.004a1 1 0 01-.941.996L12.057 6c-.552 0-1-.451-1-.998V.998a1 1 0 01.941-.996l.06-.002z"
+                  fill="#212134"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </span>
+          <span
+            class="c7"
+          >
+            Loading
+          </span>
+          <span
+            aria-hidden="true"
+            class="c8"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 10.7c0-.11.09-.2.2-.2h18.06l-8.239-8.239a.2.2 0 010-.282L11.86.14a.2.2 0 01.282 0L23.86 11.86a.2.2 0 010 .282L12.14 23.86a.2.2 0 01-.282 0L10.02 22.02a.2.2 0 010-.282L18.26 13.5H.2a.2.2 0 01-.2-.2v-2.6z"
+                fill="#212134"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </main>
+</div>
+`;
+
 exports[`Storyshots Design System/Components/TextInput base 1`] = `
 .c1 {
   border: 0;