diff --git a/catalog/app/components/FileEditor/Skeleton.tsx b/catalog/app/components/FileEditor/Skeleton.tsx
index 727e8350687..fef3e1d579c 100644
--- a/catalog/app/components/FileEditor/Skeleton.tsx
+++ b/catalog/app/components/FileEditor/Skeleton.tsx
@@ -6,7 +6,7 @@ import Skel from 'components/Skeleton'
 const useSkeletonStyles = M.makeStyles((t) => ({
   root: {
     display: 'flex',
-    height: t.spacing(30),
+    height: ({ height }: { height: number }) => t.spacing(height),
     width: '100%',
   },
   lineNumbers: {
@@ -16,6 +16,7 @@ const useSkeletonStyles = M.makeStyles((t) => ({
   content: {
     flexGrow: 1,
     marginLeft: t.spacing(2),
+    overflow: 'hidden',
   },
   line: {
     height: t.spacing(2),
@@ -25,8 +26,12 @@ const useSkeletonStyles = M.makeStyles((t) => ({
 
 const fakeLines = [80, 50, 100, 60, 30, 80, 50, 100, 60, 30, 20, 70]
 
-export default function Skeleton() {
-  const classes = useSkeletonStyles()
+interface SkeletonProps {
+  height?: number
+}
+
+export default function Skeleton({ height = 30 }: SkeletonProps) {
+  const classes = useSkeletonStyles({ height })
   return (
     <div className={classes.root}>
       <Skel className={classes.lineNumbers} height="100%" />
diff --git a/catalog/app/containers/Admin/Buckets/Tabulator.tsx b/catalog/app/containers/Admin/Buckets/Tabulator.tsx
index b52332431b7..9fed7bc36f1 100644
--- a/catalog/app/containers/Admin/Buckets/Tabulator.tsx
+++ b/catalog/app/containers/Admin/Buckets/Tabulator.tsx
@@ -9,6 +9,7 @@ import tabulatorTableSchema from 'schemas/tabulatorTable.yml.json'
 import { useConfirm } from 'components/Dialog'
 import { loadMode } from 'components/FileEditor/loader'
 import TextEditorSkeleton from 'components/FileEditor/Skeleton'
+import Skel from 'components/Skeleton'
 import * as Notifications from 'containers/Notifications'
 import type * as Model from 'model'
 import * as GQL from 'utils/GraphQL'
@@ -174,6 +175,8 @@ interface ConfigFormProps {
 const configErrorsKeys = ['name']
 
 function ConfigForm({ className, disabled, onSubmit, tabulatorTable }: ConfigFormProps) {
+  loadMode('yaml')
+
   const classes = useConfigFormStyles()
   const { onChange: onFormSpy } = OnDirty.use()
   const submit = React.useCallback(
@@ -346,6 +349,18 @@ function Empty({ className, onClick }: EmptyProps) {
   )
 }
 
+function AddTableSkeleton() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+      <Skel mb={2} height={24} />
+      <TextEditorSkeleton height={18} />
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Skel mt={2} height={32} width={120} />
+      </div>
+    </div>
+  )
+}
+
 const useAddTableStyles = M.makeStyles((t) => ({
   root: {
     display: 'flex',
@@ -375,6 +390,8 @@ interface AddTableProps {
 }
 
 function AddTable({ disabled, onCancel, onSubmit }: AddTableProps) {
+  loadMode('yaml')
+
   const classes = useAddTableStyles()
   const { onChange: onFormSpy } = OnDirty.use()
   return (
@@ -531,7 +548,7 @@ function TabulatorRow({
       <M.Collapse in={open}>
         <M.ListItem disabled={editName}>
           {open && (
-            <React.Suspense fallback={<TextEditorSkeleton />}>
+            <React.Suspense fallback={<TextEditorSkeleton height={18} />}>
               <ConfigForm
                 className={classes.config}
                 disabled={disabled || editName}
@@ -579,9 +596,6 @@ export default function Tabulator({
   bucket: bucketName,
   tabulatorTables,
 }: TabulatorProps) {
-  // FIXME: Move to ConfigForm and AddTable
-  loadMode('yaml')
-
   const renameTabulatorTable = GQL.useMutation(RENAME_TABULATOR_TABLE_MUTATION)
   const setTabulatorTable = GQL.useMutation(SET_TABULATOR_TABLE_MUTATION)
   const { push: notify } = Notifications.use()
@@ -714,14 +728,17 @@ export default function Tabulator({
           />
         ))}
       </M.List>
+      <M.Divider />
       <M.List>
         <M.ListItem>
           {toAdd ? (
-            <AddTable
-              disabled={submitting}
-              onCancel={() => setToAdd(false)}
-              onSubmit={onSubmitNew}
-            />
+            <React.Suspense fallback={<AddTableSkeleton />}>
+              <AddTable
+                disabled={submitting}
+                onCancel={() => setToAdd(false)}
+                onSubmit={onSubmitNew}
+              />
+            </React.Suspense>
           ) : (
             <>
               <M.ListItemText primary={<div className={classes.textPlaceholder}></div>} />