diff --git a/.github/workflows/docusaurus.yml b/.github/workflows/docusaurus.yml
index 0b4884579a..8dabf9f590 100644
--- a/.github/workflows/docusaurus.yml
+++ b/.github/workflows/docusaurus.yml
@@ -6,6 +6,7 @@ on:
       - develop
     paths:
       - docusaurus/**
+      - .github/workflows/docusaurus.yml
 env:
   branch_map: '{"refs/heads/master": "production", "refs/heads/develop": "staging"}'
 
@@ -17,18 +18,10 @@ jobs:
     steps:
       - name: Pull stream-chat-react
         uses: actions/checkout@v3
-      # This part here is cloning a second repository
-      # While cloning the repository:
-      #   - it clones the repo into the given `path`
-      #   - it checks out the branch defined at `ref` (version tag)
-      - name: Pull stream-chat-css
-        uses: actions/checkout@v3
-        with:
-          repository: GetStream/stream-chat-css
-          path: stream-chat-css
-          ref: v${{ node -e 'pkg=require("./package.json"); console.log(pkg.dependencies["@stream-io/stream-chat-css"])' }}
+      - name: 🔨 Install Dependencies
+        run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
       - name: Merge docs stream-chat-css
-        run: bash scripts/merge-stream-chat-css-docs.sh stream-chat-css/docs
+        run: bash scripts/merge-stream-chat-css-docs.sh node_modules/@stream-io/stream-chat-css/docs
       - name: Push to stream-chat-docusaurus
         uses: GetStream/push-stream-chat-docusaurus-action@main
         with:
diff --git a/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js b/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
index 29fcd735dd..b2f2ebdbe9 100644
--- a/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
+++ b/src/components/MessageInput/__tests__/AttachmentPreviewList.test.js
@@ -43,6 +43,10 @@ const renderComponent = (value = {}, renderFunction = render) =>
     </MessageInputContextProvider>,
   );
 
+jest.mock('nanoid', () => ({
+  nanoid: () => '<randomNanoId>',
+}));
+
 describe('AttachmentPreviewList', () => {
   it('renders without any attachments', () => {
     const { getByTestId } = renderComponent();
diff --git a/src/components/MessageInput/__tests__/__snapshots__/AttachmentPreviewList.test.js.snap b/src/components/MessageInput/__tests__/__snapshots__/AttachmentPreviewList.test.js.snap
index 5f2d55f7a0..367003da57 100644
--- a/src/components/MessageInput/__tests__/__snapshots__/AttachmentPreviewList.test.js.snap
+++ b/src/components/MessageInput/__tests__/__snapshots__/AttachmentPreviewList.test.js.snap
@@ -374,7 +374,7 @@ exports[`AttachmentPreviewList renders with one image and one file with state "u
           >
             <defs>
               <linearGradient
-                id=":r0:-linear-gradient"
+                id="<randomNanoId>-linear-gradient"
                 x1="50%"
                 x2="50%"
                 y1="0%"
@@ -394,7 +394,7 @@ exports[`AttachmentPreviewList renders with one image and one file with state "u
             </defs>
             <path
               d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-              fill="url(#:r0:-linear-gradient)"
+              fill="url(#<randomNanoId>-linear-gradient)"
               fillRule="evenodd"
             />
           </svg>
@@ -508,7 +508,7 @@ exports[`AttachmentPreviewList renders with one image and one file with state "u
           >
             <defs>
               <linearGradient
-                id=":r1:-linear-gradient"
+                id="<randomNanoId>-linear-gradient"
                 x1="50%"
                 x2="50%"
                 y1="0%"
@@ -528,7 +528,7 @@ exports[`AttachmentPreviewList renders with one image and one file with state "u
             </defs>
             <path
               d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-              fill="url(#:r1:-linear-gradient)"
+              fill="url(#<randomNanoId>-linear-gradient)"
               fillRule="evenodd"
             />
           </svg>
diff --git a/src/components/MessageInput/icons.tsx b/src/components/MessageInput/icons.tsx
index 9764c6306d..54ac1b7c41 100644
--- a/src/components/MessageInput/icons.tsx
+++ b/src/components/MessageInput/icons.tsx
@@ -1,4 +1,5 @@
-import React, { useId } from 'react';
+import React, { useMemo } from 'react';
+import { nanoid } from 'nanoid';
 
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -76,7 +77,7 @@ export const FileUploadIconFlat = () => {
 };
 
 export const LoadingIndicatorIcon = ({ size = 20 }: { size?: number }) => {
-  const id = useId();
+  const id = useMemo(() => nanoid(), []);
 
   return (
     <div className='str-chat__loading-indicator'>