improved circular loading responsiveness, style, positioning,size etc (…

…#1123)

## JIRA Ticket

Parent Jira Issue: https://jira.csiro.au/browse/BSS-112
Subtask: https://jira.csiro.au/browse/BSS-257

## Description

The CircularLoading component is improved in terms of responsiveness and
user experience. Updated the component to ensure that it behaves well
across different screen sizes, with improved centering, visibility, and
readability.

## Proposed Changes

- The content stacks vertically on smaller screens (like mobile devices)
and horizontally on larger screens
- The content ( label and spinner icon ) is now centered both
horizontally and vertically on all screen size
- Increased Spacing and Padding for better visibility to the user
- Improved styling, 

## How to Test

- Navigate to the notebooks in the app
- Upon loading you should be able to see the Loading Notebooks Label
aligned vertically, horizontally based on different screen size.
- The size of the spinner and label should be clearly visible and
positioned well.


## Checklist

- [ Y ] I have confirmed all commits have been signed.
- [ Y ] I have added JSDoc style comments to any new functions or
classes.
- [ Y ] Relevant documentation such as READMEs, guides, and class
comments are updated.

app/src/gui/components/ui/circular_loading.tsx

@@ -1,20 +1,50 @@
 import {CircularProgress, Grid, Typography} from '@mui/material';
 import React from 'react';
 
+/**
+ * CircularLoading component displays a loading spinner with a label,
+ * designed to be responsive and centered on different screen sizes.
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.label - The label text displayed next to the spinner
+ * @returns {JSX.Element} The rendered CircularLoading component
+ */
+
 export default function CircularLoading(props: {label: string}) {
   return (
     <Grid
       container
-      direction="row"
-      justifyContent="flex-start"
+      direction={{xs: 'column', sm: 'row'}}
       alignItems="center"
-      spacing={1}
+      justifyContent="center"
+      spacing={2}
+      sx={{
+        padding: 3,
+        maxWidth: '100%',
+        width: '100%',
+        minHeight: {xs: '60vh', sm: 'auto'},
+        textAlign: 'center',
+      }}
     >
       <Grid item>
-        <CircularProgress size={14} thickness={5} />
+        <CircularProgress
+          size={36}
+          thickness={5}
+          sx={{
+            color: 'primary.main',
+          }}
+        />
       </Grid>
       <Grid item>
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="h6"
+          color="text.secondary"
+          sx={{
+            fontWeight: 600,
+            display: 'block',
+            mt: {xs: 2, sm: 0},
+          }}
+        >
           {props.label}
         </Typography>
       </Grid>