Fixed the loader issue for the Statistics and Properties panel. Fixed column resizing for dependent and dependencies panels.

refs #7364

web/pgadmin/misc/dependencies/static/js/Dependencies.jsx

@@ -81,14 +81,14 @@ export default function Dependencies({ nodeData, item, node, ...props }) {
       Header: 'Type',
       accessor: 'type',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
     {
       Header: 'Name',
       accessor: 'name',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
     {
@@ -163,7 +163,7 @@ export default function Dependencies({ nodeData, item, node, ...props }) {
         ></PgTable>
       ) : (
         <div className={classes.emptyPanel}>
-          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
+          {loaderText ? (<Loader message={loaderText}/>) :
             <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>

web/pgadmin/misc/dependents/static/js/Dependents.jsx

@@ -82,14 +82,14 @@ export default function Dependents({ nodeData, item, node, ...props }) {
       Header: 'Type',
       accessor: 'type',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
     {
       Header: 'Name',
       accessor: 'name',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
     {
@@ -164,7 +164,7 @@ export default function Dependents({ nodeData, item, node, ...props }) {
         ></PgTable>
       ) : (
         <div className={classes.emptyPanel}>
-          {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
+          {loaderText ? (<Loader message={loaderText}/>) :
             <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>

web/pgadmin/misc/properties/CollectionNodeProperties.jsx

@@ -320,7 +320,7 @@ export function CollectionNodeView({
           :
           (
             <div className={classes.emptyPanel}>
-              {loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
+              {loaderText ? (<Loader message={loaderText}/>) :
                 <EmptyPanelMessage text={gettext(infoMsg)}/>
               }
             </div>

web/pgadmin/misc/sql/static/js/SQL.jsx

@@ -88,7 +88,7 @@ export default function SQL({ nodeData, node, did,  ...props }) {
 
   return (
     <>
-      <Loader message={loaderText} className={classes.loading} />
+      <Loader message={loaderText}/>
       <CodeMirror
         className={classes.textArea}
         value={nodeSQL.length > 0 ? nodeSQL : msg}

web/pgadmin/misc/statistics/static/js/Statistics.jsx

@@ -39,11 +39,6 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: '0.5rem',
     fontSize: '0.875rem',
   },
-  loading: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-    colour: theme.palette.grey[400]
-  },
   autoResizer: {
     height: '100% !important',
     width: '100% !important',
@@ -113,14 +108,14 @@ function getColumn(data, singleLineStatistics) {
         Header: 'Statictics',
         accessor: 'name',
         sortble: true,
-        resizable: false,
+        resizable: true,
         disableGlobalFilter: false,
       },
       {
         Header: 'Value',
         accessor: 'value',
         sortble: true,
-        resizable: false,
+        resizable: true,
         disableGlobalFilter: false,
       },
     ];
@@ -191,14 +186,14 @@ export default function Statistics({ nodeData, item, node, ...props }) {
       Header: 'Statictics',
       accessor: 'name',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
     {
       Header: 'Value',
       accessor: 'value',
       sortble: true,
-      resizable: false,
+      resizable: true,
       disableGlobalFilter: false,
     },
   ]);
@@ -274,7 +269,7 @@ export default function Statistics({ nodeData, item, node, ...props }) {
         ></PgTable>
       ) : (
         <div className={classes.emptyPanel}>
-          <Loader message={loaderText} className={classes.loading} />
+          <Loader message={loaderText} />
           <EmptyPanelMessage text={gettext(msg)}/>
         </div>
       )}