diff --git a/packages/kbn-unified-doc-viewer/index.ts b/packages/kbn-unified-doc-viewer/index.ts
index 16cf020b788df..47aae8b209ac3 100644
--- a/packages/kbn-unified-doc-viewer/index.ts
+++ b/packages/kbn-unified-doc-viewer/index.ts
@@ -6,10 +6,4 @@
  * Side Public License, v 1.
  */
 
-export {
-  DeferredSpinner,
-  DocViewer,
-  DocViewsRegistry,
-  ElasticRequestState,
-  FieldName,
-} from './src';
+export { DocViewer, DocViewsRegistry, ElasticRequestState, FieldName } from './src';
diff --git a/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/deferred_spinner.tsx b/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/deferred_spinner.tsx
deleted file mode 100644
index 11f77281f9eb0..0000000000000
--- a/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/deferred_spinner.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, { useEffect, useRef, useState } from 'react';
-
-/**
- * A component that shows it children with a 300ms delay. This is good for wrapping
- * loading spinners for tasks that might potentially be very fast (e.g. loading async chunks).
- * That way we don't show a quick flash of the spinner before the actual content and will only
- * show the spinner once loading takes a bit longer (more than 300ms).
- */
-export const DeferredSpinner: React.FC = ({ children }) => {
-  const timeoutRef = useRef<number>();
-  const [showContent, setShowContent] = useState(false);
-  useEffect(() => {
-    timeoutRef.current = window.setTimeout(() => {
-      setShowContent(true);
-    }, 300);
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  return showContent ? <React.Fragment>{children}</React.Fragment> : null;
-};
diff --git a/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/index.ts b/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/index.ts
deleted file mode 100644
index e854dcd4979a0..0000000000000
--- a/packages/kbn-unified-doc-viewer/src/components/deferred_spinner/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export * from './deferred_spinner';
diff --git a/packages/kbn-unified-doc-viewer/src/components/index.ts b/packages/kbn-unified-doc-viewer/src/components/index.ts
index bf1ba87bc3889..0ab434a88fd44 100644
--- a/packages/kbn-unified-doc-viewer/src/components/index.ts
+++ b/packages/kbn-unified-doc-viewer/src/components/index.ts
@@ -6,6 +6,5 @@
  * Side Public License, v 1.
  */
 
-export * from './deferred_spinner';
 export * from './doc_viewer';
 export * from './field_name';
diff --git a/src/plugins/unified_doc_viewer/public/index.tsx b/src/plugins/unified_doc_viewer/public/index.tsx
index cff2303a61c93..d08de9dcaa0eb 100644
--- a/src/plugins/unified_doc_viewer/public/index.tsx
+++ b/src/plugins/unified_doc_viewer/public/index.tsx
@@ -8,7 +8,8 @@
 
 import React from 'react';
 import { withSuspense } from '@kbn/shared-ux-utility';
-import { EuiDelayRender, EuiLoadingSpinner, EuiPanel } from '@elastic/eui';
+import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
+import { DocViewRenderProps } from '@kbn/unified-doc-viewer/src/services/types';
 import type { JsonCodeEditorProps } from './components';
 import { UnifiedDocViewerPublicPlugin } from './plugin';
 
@@ -21,19 +22,15 @@ const LazyJsonCodeEditor = React.lazy(
 export const JsonCodeEditor = withSuspense<JsonCodeEditorProps>(
   LazyJsonCodeEditor,
   <EuiDelayRender delay={300}>
-    <EuiPanel color="transparent" paddingSize="s">
-      <EuiLoadingSpinner size="m" />
-    </EuiPanel>
+    <EuiSkeletonText />
   </EuiDelayRender>
 );
 
 const LazyUnifiedDocViewer = React.lazy(() => import('./components/doc_viewer'));
-export const UnifiedDocViewer = withSuspense(
+export const UnifiedDocViewer = withSuspense<DocViewRenderProps>(
   LazyUnifiedDocViewer,
   <EuiDelayRender delay={300}>
-    <EuiPanel color="transparent" paddingSize="s">
-      <EuiLoadingSpinner size="m" />
-    </EuiPanel>
+    <EuiSkeletonText />
   </EuiDelayRender>
 );
 
diff --git a/src/plugins/unified_doc_viewer/public/plugin.tsx b/src/plugins/unified_doc_viewer/public/plugin.tsx
index 4ff210a590b37..018e6ffadd312 100644
--- a/src/plugins/unified_doc_viewer/public/plugin.tsx
+++ b/src/plugins/unified_doc_viewer/public/plugin.tsx
@@ -10,8 +10,8 @@ import React from 'react';
 import type { CoreSetup, Plugin } from '@kbn/core/public';
 import { DOC_TABLE_LEGACY } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
-import { DeferredSpinner, DocViewsRegistry } from '@kbn/unified-doc-viewer';
-import { EuiSkeletonText } from '@elastic/eui';
+import { DocViewsRegistry } from '@kbn/unified-doc-viewer';
+import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
 import { createGetterSetter, Storage } from '@kbn/kibana-utils-plugin/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
@@ -57,9 +57,9 @@ export class UnifiedDocViewerPublicPlugin
         return (
           <React.Suspense
             fallback={
-              <DeferredSpinner>
+              <EuiDelayRender delay={300}>
                 <EuiSkeletonText />
-              </DeferredSpinner>
+              </EuiDelayRender>
             }
           >
             <DocView {...props} />
@@ -77,9 +77,9 @@ export class UnifiedDocViewerPublicPlugin
         return (
           <React.Suspense
             fallback={
-              <DeferredSpinner>
+              <EuiDelayRender delay={300}>
                 <EuiSkeletonText />
-              </DeferredSpinner>
+              </EuiDelayRender>
             }
           >
             <SourceViewer