diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 2d471843e0..417e71ec22 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -26,7 +26,8 @@ export const Chart = function Chart({
 
   const computedStyles = {
     width,
-    height
+    height,
+    background: darkMode ? '#1f2936' : 'white'
   };
 
   const dataProperty = component.definition.properties.data;
@@ -109,7 +110,9 @@ export const Chart = function Chart({
     >
       {loadingState === true ? 
         <div style={{ width: '100%' }} className="p-2">
-          <Skeleton count={5} />
+          <center>
+            <div className="spinner-border mt-5" role="status"></div>
+          </center>
         </div>
       :
         <Plot
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index dddf5957d3..d2c376aee5 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -589,7 +589,9 @@ export function Table({
         </table>
         {loadingState === true && (
           <div style={{ width: '100%' }} className="p-2">
-            <Skeleton count={5} />
+            <center>
+              <div className="spinner-border mt-5" role="status"></div>
+            </center>
           </div>
         )}
       </div>
diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx
index 2894709264..533e5def9c 100644
--- a/frontend/src/Editor/Components/Text.jsx
+++ b/frontend/src/Editor/Components/Text.jsx
@@ -45,7 +45,7 @@ export const Text = function Text({
       {!loadingState && <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }} />}
       {loadingState === true && (
         <div>
-          <Skeleton count={1} />
+          <div className="skeleton-line w-10"></div>
         </div>
       )}
     </div>