Better loading screen behavior

malloydata · Nov 27, 2024 · d5cdf54 · d5cdf54
1 parent 3c2634c
commit d5cdf54
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx b/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx
@@ -52,20 +52,20 @@ export const ExploreQueryEditor: React.FC<ExploreQueryEditorProps> = ({
 }) => {
   const [result, setResult] = useState<MalloyResult>();
   const [error, setError] = useState<Error>();
-  const [_lastRunQuery, setLastRunQuery] = useState<string>();
 
-  const query = queryWriter.getQueryStringForNotebook();
   const {isRunnable} = querySummary ?? {isRunnable: false};
 
-  const runQueryCallback = React.useCallback(() => {
-    if (!isRunnable || !query) {
-      return;
-    }
-    setResult(undefined);
-    setError(undefined);
-    setLastRunQuery(query);
-    runQuery(query);
-  }, [isRunnable, query, runQuery]);
+  const runQueryCallback = React.useCallback(
+    (query: string) => {
+      if (!isRunnable) {
+        return;
+      }
+      setResult(undefined);
+      setError(undefined);
+      runQuery(query);
+    },
+    [isRunnable, runQuery]
+  );
 
   useEffect(() => {
     if (currentResult instanceof Error) {
@@ -86,6 +86,7 @@ export const ExploreQueryEditor: React.FC<ExploreQueryEditorProps> = ({
             modelPath={modelPath}
             queryModifiers={queryModifiers}
             querySummary={querySummary}
+            queryWriter={queryWriter}
             source={source}
             refreshModel={refreshModel}
             runQuery={runQueryCallback}

diff --git a/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx b/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx
@@ -17,6 +17,7 @@ import {QueryModifiers} from '../../hooks';
 import {QuerySummary} from '../../types';
 import styled from 'styled-components';
 import {SearchContext} from '../../contexts/search_context';
+import {QueryWriter} from '../../core/query';
 
 const useLoad = true;
 
@@ -27,7 +28,8 @@ export interface QueryEditorProps {
   refreshModel?: () => void;
   queryModifiers: QueryModifiers;
   querySummary: QuerySummary | undefined;
-  runQuery: () => void;
+  queryWriter: QueryWriter;
+  runQuery: (query: string) => void;
   source: SourceDef;
   topValues: SearchValueMapResult[] | undefined;
 }
@@ -38,17 +40,21 @@ export const QueryEditor = ({
   modelPath,
   queryModifiers,
   querySummary,
+  queryWriter,
   refreshModel,
   runQuery,
   source,
   topValues,
 }: QueryEditorProps) => {
   const [insertOpen, setInsertOpen] = useState(false);
   const [loadOpen, setLoadOpen] = useState(false);
+  const [lastRunQuery, setLastRunQuery] = useState<string>('');
 
   const isQueryEmpty = !querySummary || querySummary.stages.length === 0;
   const {isRunnable} = querySummary ?? {isRunnable: false};
 
+  const query = queryWriter.getQueryStringForNotebook();
+
   const clearQuery = () => {
     queryModifiers.clearQuery();
   };
@@ -61,7 +67,12 @@ export const QueryEditor = ({
     queryModifiers.loadQuery(name);
   };
 
-  const dirty = false; // query !== lastRunQuery;
+  const dirty = query !== lastRunQuery;
+
+  const onRun = () => {
+    setLastRunQuery(query);
+    runQuery(query);
+  };
 
   return (
     <SearchContext.Provider value={{topValues}}>
@@ -125,7 +136,7 @@ export const QueryEditor = ({
               />
               <StyledRunIcon
                 width="80px"
-                onClick={runQuery}
+                onClick={onRun}
                 className={
                   isRunning
                     ? 'running'

diff --git a/src/app/CommonElements.tsx b/src/app/CommonElements.tsx
@@ -27,7 +27,7 @@ export const EmptyMessage = styled.div`
   text-align: center;
   margin-top: 30px;
   margin-bottom: 30px;
-  font-family: Roboto;
+  font-family: var(--malloy-composer-fontFamily, sans-serif);
   text-transform: none;
   font-size: 16px;
   font-weight: normal;

diff --git a/src/app/Explore/Explore.tsx b/src/app/Explore/Explore.tsx
@@ -135,10 +135,6 @@ export const Explore: React.FC = () => {
     isRunning,
   } = useRunQuery(modelDef, modelPath, runQueryExt);
 
-  useEffect(() => {
-    reset();
-  }, [querySummary, reset]);
-
   useEffect(() => {
     if (builderError) {
       setError(builderError);
@@ -322,16 +318,6 @@ export const Explore: React.FC = () => {
   };
 
   const topValues = useTopValues(modelDef, modelPath, sourceDef);
-  if (loading || (appId && !appInfo)) {
-    section = 'loading';
-  }
-
-  // eslint-disable-next-line no-console
-  console.log({
-    model,
-    modelPath,
-    source,
-  });
 
   return (
     <Main handlers={handlers} keyMap={KEY_MAP}>
@@ -427,10 +413,10 @@ export const Explore: React.FC = () => {
                   <Apps />
                 </PageContent>
               )}
-              {section === 'loading' && (
-                <EmptyMessage>
+              {loading && (
+                <LoadingOverlay>
                   <LoadingSpinner text="Loading Data..." />
-                </EmptyMessage>
+                </LoadingOverlay>
               )}
             </PageContainer>
           </Page>
@@ -519,6 +505,7 @@ const HeaderLeft = styled.div`
 const Page = styled(Content)`
   margin-top: 10px;
   height: unset;
+  position: relative;
 `;
 
 const RightChannel = styled.div`
@@ -539,6 +526,17 @@ const BottomChannel = styled.div`
   background-color: ${COLORS.mainBackground};
 `;
 
+const LoadingOverlay = styled(EmptyMessage)`
+  background-color: ${COLORS.mainBackground};
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  margin: 0;
+`;
+
 function generateReadme(appInfo: AppInfo) {
   let readme = '';
   const title = appInfo.title || 'Malloy';