diff --git a/common/types/index.ts b/common/types/index.ts
index 08412a1..b90eb0b 100644
--- a/common/types/index.ts
+++ b/common/types/index.ts
@@ -87,6 +87,7 @@ export interface CreateAccelerationForm {
 }
 
 export enum AsyncQueryStatus {
+  Initial = 'initial',
   Pending = 'pending',
   Success = 'success',
   Failed = 'failed',
diff --git a/public/components/SQLPage/AccelerationFlyoutButton.tsx b/public/components/SQLPage/AccelerationFlyoutButton.tsx
new file mode 100644
index 0000000..f208400
--- /dev/null
+++ b/public/components/SQLPage/AccelerationFlyoutButton.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { catalogCacheRefs } from '../../../public/framework/catalog_cache_refs';
+import { getRenderCreateAccelerationFlyout } from '../../../public/dependencies/register_observability_dependencies';
+
+interface AccelerationFlyoutButtonProps {
+  datasource: string;
+  asyncLoading: boolean;
+}
+
+export const AccelerationFlyoutButton = (props: AccelerationFlyoutButtonProps) => {
+  const { datasource, asyncLoading } = props;
+
+  const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
+  const { loadStatus, startLoading, stopLoading } = catalogCacheRefs.useLoadTableColumnsToCache();
+
+  useEffect(() => {
+    return () => {
+      stopLoading();
+    };
+  }, []);
+
+  return (
+    <EuiButton
+      className="sql-accelerate-button"
+      onClick={() =>
+        renderCreateAccelerationFlyout(datasource, loadStatus, startLoading, stopLoading)
+      }
+      isDisabled={asyncLoading}
+    >
+      Accelerate Table
+    </EuiButton>
+  );
+};
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 37f1a89..28ccb3c 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -26,6 +26,8 @@ import { CoreStart } from '../../../../../src/core/public';
 import { SAMPLE_SQL_QUERY } from '../../../common/constants';
 import { getRenderCreateAccelerationFlyout } from '../../dependencies/register_observability_dependencies';
 import { ResponseDetail, TranslateResult } from '../Main/main';
+import { catalogCacheRefs } from '../../framework/catalog_cache_refs';
+import { AccelerationFlyoutButton } from './AccelerationFlyoutButton';
 
 interface SQLPageProps {
   http: CoreStart['http'];
@@ -67,7 +69,13 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
   }
 
   setAccelerationFlyout = () => {
-    this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label);
+    const { loadStatus, startLoading, stopLoading } = catalogCacheRefs.useLoadTableColumnsToCache();
+    this.renderCreateAccelerationFlyout(
+      this.props.selectedDatasource[0].label,
+      loadStatus,
+      startLoading,
+      stopLoading
+    );
   };
 
   componentDidUpdate(prevProps: SQLPageProps) {
@@ -210,15 +218,10 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             {this.props.selectedDatasource &&
               this.props.selectedDatasource[0].label !== 'OpenSearch' && (
                 <EuiFlexItem grow={false}>
-                  <EuiButton
-                    className="sql-accelerate-button"
-                    onClick={() =>
-                      this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label)
-                    }
-                    isDisabled={this.props.asyncLoading}
-                  >
-                    Accelerate Table
-                  </EuiButton>
+                  <AccelerationFlyoutButton
+                    datasource={this.props.selectedDatasource[0].label}
+                    asyncLoading={this.props.asyncLoading}
+                  />
                 </EuiFlexItem>
               )}
           </EuiFlexGroup>
diff --git a/public/dependencies/register_observability_dependencies.tsx b/public/dependencies/register_observability_dependencies.tsx
index 3a83446..802ae34 100644
--- a/public/dependencies/register_observability_dependencies.tsx
+++ b/public/dependencies/register_observability_dependencies.tsx
@@ -20,7 +20,16 @@ export const [
 export const [
   getRenderCreateAccelerationFlyout,
   setRenderCreateAccelerationFlyout,
-] = createGetterSetter<(dataSource: string) => void>('renderCreateAccelerationFlyout');
+] = createGetterSetter<
+  (
+    dataSource: string,
+    loadStatus: any,
+    startLoading: (dataSourceName: string, databaseName?: string, tableName?: string) => void,
+    stopLoading: () => void,
+    databaseName?: string,
+    tableName?: string
+  ) => void
+>('renderCreateAccelerationFlyout');
 
 export const registerObservabilityDependencies = (start?: ObservabilityStart) => {
   if (!start) return;