diff --git a/@theme/components/XRPLoader.tsx b/@theme/components/XRPLoader.tsx
index fe6f75e1c2..25a535e8dc 100644
--- a/@theme/components/XRPLoader.tsx
+++ b/@theme/components/XRPLoader.tsx
@@ -2,12 +2,15 @@ import * as React from 'react';
 
 export interface XRPLoaderProps {
     message?: string
+    show: boolean
 }
 
 export default function XRPLoader(props: XRPLoaderProps) {
+  const classnames = props.show ? "loader" : "loader collapse"
   return (
-  <div className="loader">
-    <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
-    {props.message}
-  </div>);
+    <div className={classnames}>
+      <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
+      {props.message}
+    </div>
+  )
 }
diff --git a/resources/dev-tools/components/Loader.tsx b/resources/dev-tools/components/Loader.tsx
deleted file mode 100644
index 8e9d9a98fd..0000000000
--- a/resources/dev-tools/components/Loader.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-
-export const Loader = () => {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-
-  return <img className="throbber" src="/img/xrp-loader-96.png" alt={translate("(loading)")} />
-
-}
diff --git a/resources/dev-tools/websocket-api-tool.page.tsx b/resources/dev-tools/websocket-api-tool.page.tsx
index f2f611d00b..287218d660 100644
--- a/resources/dev-tools/websocket-api-tool.page.tsx
+++ b/resources/dev-tools/websocket-api-tool.page.tsx
@@ -22,7 +22,7 @@ import { CommandGroup, CommandMethod } from './components/websocket-api/types';
 
 import commandList from "./components/websocket-api/data/command-list.json";
 import connections from "./components/websocket-api/data/connections.json";
-import { Loader } from './components/Loader';
+import XRPLoader from '../../@theme/components/XRPLoader';
 
 export const frontmatter = {
   seo: {
@@ -245,7 +245,7 @@ export function WebsocketApiTool() {
                   {sendLoading && (
                     <div className="input-group loader send-loader">
                       <span className="input-group-append">
-                        <Loader />
+                        <XRPLoader show={true} />
                       </span>
                     </div>
                   )}
@@ -274,7 +274,7 @@ export function WebsocketApiTool() {
                   {wsLoading && (
                     <div className="input-group loader connect-loader">
                       <span className="input-group-append">
-                        <Loader />
+                        <XRPLoader show={true} />
                       </span>
                     </div>
                   )}