diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js
index ce59e5650..d0fc1a19c 100644
--- a/web/pgadmin/browser/static/js/panel.js
+++ b/web/pgadmin/browser/static/js/panel.js
@@ -160,7 +160,7 @@ define(
 
               pgBrowser.Events.on('pgadmin:database:connected', () => {
 
-                if(myPanel.isVisible() && myPanel._type == 'dashboard' && myPanel._type !== 'properties') {
+                if(myPanel.isVisible() && myPanel._type !== 'properties') {
                   getPanelView(
                     pgBrowser.tree,
                     $container[0],
diff --git a/web/pgadmin/browser/static/js/panel_view.jsx b/web/pgadmin/browser/static/js/panel_view.jsx
index e10b2d738..f978ac78a 100644
--- a/web/pgadmin/browser/static/js/panel_view.jsx
+++ b/web/pgadmin/browser/static/js/panel_view.jsx
@@ -119,6 +119,8 @@ export function getPanelView(
           nodeData={nodeData}
           node={node}
           item={item}
+          did={((!_.isUndefined(treeNodeInfo)) && (!_.isUndefined(treeNodeInfo['database']))) ? treeNodeInfo['database']._id: 0}
+          dbConnected={!_.isUndefined(treeNodeInfo) && !_.isUndefined(treeNodeInfo['database']) ? treeNodeInfo.database.connected: false}
         />
       </Theme>,
       container
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index 5823fed4b..25703eb6d 100644
--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -22,6 +22,7 @@ import { PgIconButton } from '../../static/js/components/Buttons';
 import DeleteIcon from '@material-ui/icons/Delete';
 import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
 import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
+import Loader from 'sources/components/Loader';
 
 const useStyles = makeStyles((theme) => ({
   emptyPanel: {
@@ -87,6 +88,7 @@ export function CollectionNodeView({
   const [infoMsg, setInfoMsg] = React.useState('Please select an object in the tree view.');
   const [selectedObject, setSelectedObject] = React.useState([]);
   const [reload, setReload] = React.useState(false);
+  const [loaderText, setLoaderText] = React.useState('');
 
   const [pgTableColumns, setPgTableColumns] = React.useState([
     {
@@ -192,6 +194,7 @@ export function CollectionNodeView({
 
       let tableColumns = [];
       var column = {};
+      setLoaderText('Loading...');
 
       if (itemNodeData._type.indexOf('coll-') > -1 && !_.isUndefined(nodeObj.getSchema)) {
         let schema = nodeObj.getSchema?.call(nodeObj, treeNodeInfo, itemNodeData);
@@ -248,6 +251,7 @@ export function CollectionNodeView({
           setPgTableColumns(tableColumns);
           setData(res.data);
           setInfoMsg('No properties are available for the selected object.');
+          setLoaderText('');
         })
         .catch((err) => {
           Notify.alert(
@@ -311,7 +315,9 @@ export function CollectionNodeView({
           :
           (
             <div className={classes.emptyPanel}>
-              <EmptyPanelMessage text={gettext(infoMsg)}/>
+              {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
+                <EmptyPanelMessage text={gettext(infoMsg)}/>
+              }
             </div>
           )
         }
diff --git a/web/pgadmin/misc/sql/static/js/SQL.jsx b/web/pgadmin/misc/sql/static/js/SQL.jsx
index 5eec57e8d..fa5f66650 100644
--- a/web/pgadmin/misc/sql/static/js/SQL.jsx
+++ b/web/pgadmin/misc/sql/static/js/SQL.jsx
@@ -15,6 +15,7 @@ import Notify from '../../../../static/js/helpers/Notifier';
 import getApiInstance from 'sources/api_instance';
 import { makeStyles } from '@material-ui/core/styles';
 import CodeMirror from '../../../../static/js/components/CodeMirror';
+import Loader from 'sources/components/Loader';
 
 const useStyles = makeStyles((theme) => ({
   textArea: {
@@ -27,10 +28,10 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function SQL({ nodeData, node, ...props }) {
+export default function SQL({ nodeData, node, did,  ...props }) {
   const classes = useStyles();
   const [nodeSQL, setNodeSQL] = React.useState('');
-
+  const [loaderText, setLoaderText] = React.useState('');
   const [msg, setMsg] = React.useState('');
 
   useEffect(() => {
@@ -44,12 +45,13 @@ export default function SQL({ nodeData, node, ...props }) {
         true,
         node.url_jump_after_node
       );
+      setLoaderText('Loading...');
+      if (did && !props.dbConnected) return;
       sql =
         '-- ' + gettext('No SQL could be generated for the selected object.');
 
       if (node.hasSQL) {
         const api = getApiInstance();
-
         api({
           url: url,
           type: 'GET',
@@ -57,6 +59,7 @@ export default function SQL({ nodeData, node, ...props }) {
           .then((res) => {
             if (res.data.length > 0) {
               setNodeSQL(res.data);
+              setLoaderText('');
             } else {
               setMsg(sql);
             }
@@ -68,7 +71,11 @@ export default function SQL({ nodeData, node, ...props }) {
             );
             // show failed message.
             setMsg(gettext('Failed to retrieve data from the server.'));
+            setLoaderText('');
           });
+      }else{
+        setMsg(sql);
+        setLoaderText('');
       }
     }
     if (sql != '') {
@@ -77,31 +84,20 @@ export default function SQL({ nodeData, node, ...props }) {
     return () => {
       setNodeSQL([]);
     };
-  }, [nodeData]);
+  }, [nodeData, props.dbConnected]);
 
   return (
     <>
-      {nodeSQL.length > 0 ? (
-        <CodeMirror
-          className={classes.textArea}
-          value={nodeSQL}
-          options={{
-            lineNumbers: true,
-            mode: 'text/x-pgsql',
-            readOnly: true,
-          }}
-        />
-      ) : (
-        <CodeMirror
-          className={classes.textArea}
-          value={msg}
-          options={{
-            lineNumbers: true,
-            mode: 'text/x-pgsql',
-            readOnly: true,
-          }}
-        />
-      )}
+      <Loader message={loaderText} className={classes.loading} />
+      <CodeMirror
+        className={classes.textArea}
+        value={nodeSQL.length > 0 ? nodeSQL : msg}
+        readonly={true}
+        options={{
+          lineNumbers: true,
+          mode: 'text/x-pgsql',
+        }}
+      />
     </>
   );
 }
@@ -111,4 +107,6 @@ SQL.propTypes = {
   nodeData: PropTypes.object,
   treeNodeInfo: PropTypes.object,
   node: PropTypes.func,
+  dbConnected: PropTypes.bool,
+  did: PropTypes.number
 };
diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
index 3b7b414e2..e072a2cc5 100644
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -80,6 +80,7 @@ function getColumn(data, singleLineStatistics) {
                 if (!_.isNull(rowB.values[id]) && typeof (rowB.values[id]) == 'string' && rowB.values[id].indexOf(t) > -1) {
                   val2 = parseInt(rowB.values[id]) * Math.pow(1024, i);
                 }
+
               });
 
               if ((val1) > (val2) || _.isNull(val2)) {
@@ -273,9 +274,8 @@ export default function Statistics({ nodeData, item, node, ...props }) {
         ></PgTable>
       ) : (
         <div className={classes.emptyPanel}>
-          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
-            <EmptyPanelMessage text={gettext(msg)}/>
-          }
+          <Loader message={loaderText} className={classes.loading} />
+          <EmptyPanelMessage text={gettext(msg)}/>
         </div>
       )}
     </>