add loading

Author: Francesca-Bit

packages/tdb-dashboard/src/components/DocumentSearchComponent.js

@@ -3,6 +3,7 @@ import {DocumentsGraphqlTable} from "@terminusdb/terminusdb-documents-ui-templat
 import {gql} from "@apollo/client"
 import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {WOQLClientObj} from '../init-woql-client'
+import { Loading } from "./Loading"
 /**
  * 
  * @param {*} setSelected function to get selected document link by user 
@@ -22,7 +23,7 @@ export const DocumentSearchComponent = ({setSelected, doctype}) => {
      },[doctype]);
     const querystr  = documentTablesConfig && documentTablesConfig.objQuery ? documentTablesConfig.objQuery[doctype].query : null
     const gqlQuery = querystr ? gql`${querystr}` : null
-    if(!gqlQuery) return <div/>
+    if(!gqlQuery)  return <Loading message={`Loading the .... ${doctype} documents`} type={'PROGRESS_BAR_COMPONENT'}/>
 
     return  <DocumentsGraphqlTable tableConfig={documentTablesConfig} 
                 type={doctype} 

packages/tdb-dashboard/src/pages/GraphIqlEditor.js

@@ -26,7 +26,7 @@ export function GraphIqlEditor({}) {
     <Layout mainClassName={layoutClass} showLeftSideBar={false}>
         <GraphiQL 
           editorTheme="shadowfox"
-          defaultQuery={'{}'}
+          defaultQuery={'query{}'}
           fetcher={fetcher}
 
         />

packages/tdb-dashboard/src/pages/Layout.js

@@ -70,7 +70,7 @@ export const Layout = (props) => {
         return <ConnectedDataProduct/>
     }   
 
-    const headerElement = changeRequestHolder()
+    const headerElement = dataProduct ? changeRequestHolder() : ""
 
     //defaultSize={340} 
     return <Container fluid className="p-0 flex-row">

packages/tdb-documents-ui-template/src/hook/useTDBDocuments.js

@@ -15,7 +15,10 @@ export const useTDBDocuments = (woqlClient) => {
     const [totalDocumentCount, setTotalDocumentCount]=useState(false)
 
     // bool|Object
-    const [documentTablesConfig,setDocumentTablesConfig]=useState(false)
+    //the  default value is null and false if it will be failed
+    //start status null 
+    //after the call can be an object or false
+    const [documentTablesConfig,setDocumentTablesConfig]=useState(null)
 
     // bool|Object
     const [selectedDocument, setSelectedDocument] = useState(false)