diff --git a/frontend/src/metabase/components/AccordionList.jsx b/frontend/src/metabase/components/AccordionList.jsx
index a7a0096e3c2702f98d2fbcc709be9494d543e380..fd3fc967f39f215aa1ab4225ff61d3313ce807c4 100644
--- a/frontend/src/metabase/components/AccordionList.jsx
+++ b/frontend/src/metabase/components/AccordionList.jsx
@@ -64,6 +64,7 @@ export default class AccordionList extends Component {
 
     // section getters/render props
     renderSectionIcon: PropTypes.func,
+    renderSectionExtra: PropTypes.func,
 
     // item getters/render props
     itemIsSelected: PropTypes.func,
@@ -102,6 +103,7 @@ export default class AccordionList extends Component {
     // section getters/render props
     renderSectionIcon: section =>
       section.icon && <Icon name={section.icon} size={18} />,
+    renderSectionExtra: () => null,
 
     // item getters/render props
     itemIsClickable: item => true,
@@ -467,6 +469,7 @@ const AccordionListCell = ({
   alwaysExpanded,
   toggleSection,
   renderSectionIcon,
+  renderSectionExtra,
   renderItemName,
   renderItemDescription,
   renderItemIcon,
@@ -492,6 +495,7 @@ const AccordionListCell = ({
       );
     } else {
       const icon = renderSectionIcon(section, sectionIndex);
+      const extra = renderSectionExtra(section, sectionIndex);
       const name = section.name;
       content = (
         <div
@@ -512,9 +516,12 @@ const AccordionListCell = ({
               {icon}
             </span>
           )}
-          {name && <h3 className="List-section-title text-wrap">{name}</h3>}
+          {name && (
+            <h3 className="List-section-title flex-full text-wrap">{name}</h3>
+          )}
+          {extra}
           {sections.length > 1 && section.items && section.items.length > 0 && (
-            <span className="flex-align-right hover-child">
+            <span className="flex-align-right ml1 hover-child">
               <Icon
                 name={
                   sectionIsExpanded(sectionIndex) ? "chevronup" : "chevrondown"
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index dfc0b129921d86aa7a442e2e7f961529bcea7520..df1522cbea42a2b4d63d0d7f5653fbf1bdb366ae 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -36,6 +36,7 @@ import { getMetadata } from "metabase/selectors/metadata";
 import {
   DataBucketList,
   DataBucketListItem,
+  PickerSpinner,
   RawDataBackButton,
 } from "./DataSelector.styled";
 import "./DataSelector.css";
@@ -1134,11 +1135,13 @@ const DatabaseSchemaPicker = ({
       selectedDatabase.id === database.id &&
       database.schemas.length === 0 &&
       isLoading,
+    active: database.initial_sync,
   }));
 
   if (hasBackButton) {
     sections.unshift({
       name: <RawDataBackButton />,
+      active: true,
     });
   }
 
@@ -1183,6 +1186,9 @@ const DatabaseSchemaPicker = ({
           <Icon className="Icon text-default" name={item.icon} size={18} />
         )
       }
+      renderSectionExtra={item =>
+        !item.active && <PickerSpinner size={16} borderWidth={2} />
+      }
       renderItemIcon={() => <Icon name="folder" size={16} />}
       initiallyOpenSection={openSection}
       alwaysTogglable={true}
@@ -1263,7 +1269,7 @@ const TablePicker = ({
               ? item.table.id === selectedTable.id
               : false
           }
-          itemIsClickable={item => item.table}
+          itemIsClickable={item => item.table && item.table.initial_sync}
           renderItemIcon={item =>
             item.table ? <Icon name="table2" size={18} /> : null
           }
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx b/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
index 55bf571cafb2cd284b0f0ae8e104712d2d82560d..7f4ae3ed754034352c67dcbebd355bf4c47f7583 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.styled.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 import styled from "styled-components";
 import Icon from "metabase/components/Icon";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
 import { SelectList } from "metabase/components/select-list";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
@@ -17,6 +18,14 @@ export const DataBucketDescription = styled.span`
   font-size: 12px;
 `;
 
+export const PickerSpinner = styled(LoadingSpinner)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: ${color("brand")};
+  margin-left: 0.5rem;
+`;
+
 const BackButtonContainer = styled.div`
   display: flex;
   align-items: center;
diff --git a/frontend/test/__support__/sample_dataset_fixture.json b/frontend/test/__support__/sample_dataset_fixture.json
index 2128a98041d9d3948f20f8eda3f3c01c279c6f2b..f1109baec51f41b4eb3bbbc29e01b73e60496171 100644
--- a/frontend/test/__support__/sample_dataset_fixture.json
+++ b/frontend/test/__support__/sample_dataset_fixture.json
@@ -420,6 +420,7 @@
         "active": true,
         "id": 5,
         "db_id": 4,
+        "initial_sync": true,
         "visibility_type": null,
         "display_name": "Table in First Schema",
         "created_at": "2017-06-14T23:22:55.825Z",