feat: add a RefreshButton with spiner while loading

Author: AlexStack

src/app/page.tsx

@@ -14,10 +14,12 @@ const loadDataFromApi = async (slug?: string) => {
     getApiResponse<NpmData>({
       apiEndpoint: 'https://registry.npmjs.org/react/latest',
       revalidate: 60 * 60 * 24, // 24 hours cache
+      timeout: 5000, // 5 seconds
     }),
     getApiResponse<NpmData>({
       apiEndpoint: 'https://registry.npmjs.org/next/latest',
       revalidate: 0, // no cache
+      timeout: 5000, // 5 seconds
     }),
   ]);
 

src/components/shared/DisplayRandomPicture.tsx

@@ -3,6 +3,7 @@
 'use client';
 import styled from '@emotion/styled';
 import { Autorenew, Send } from '@mui/icons-material';
+import { css, keyframes } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import { purple } from '@mui/material/colors';
@@ -14,64 +15,60 @@ import { useClientContext } from '@/hooks/useClientContext';
 
 import SubmitButton from '@/components/shared/SubmitButton';
 
-const StyledRefreshButton = styled.div`
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin: 0.5rem;
-  cursor: pointer;
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-  :hover {
-    svg {
-      path {
-        fill: ${purple[500]};
-      }
-    }
-    .MuiAvatar-circular {
-      background-color: ${purple[50]};
-    }
-  }
-`;
+import { getApiResponse } from '@/utils/shared/get-api-response';
 
 const DisplayRandomPicture = () => {
   const [imageUrl, setImageUrl] = useState('');
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const { fetchCount, updateClientCtx } = useClientContext();
   const { setAlertBarProps, renderAlertBar } = useAlertBar();
   const renderCountRef = React.useRef(0);
 
   const fetchRandomPicture = async () => {
+    if (loading) {
+      setAlertBarProps({
+        message: 'Please wait for the current fetch to complete',
+        severity: 'warning',
+      });
+      return;
+    }
     setLoading(true);
     setError('');
 
     try {
-      const response = await fetch('https://picsum.photos/300/150');
-      if (!response.ok) {
-        throw new Error('Error fetching the image');
+      const response = await getApiResponse<Response & { url: string }>({
+        apiEndpoint: 'https://picsum.photos/300/160',
+        timeout: 5001,
+      });
+
+      if (!response?.url) {
+        throw new Error('Error fetching the image, no response url');
       }
+
       setImageUrl(response.url);
       updateClientCtx({ fetchCount: fetchCount + 1 });
       setAlertBarProps({
         message: 'A random picture fetched successfully',
         severity: 'info',
       });
     } catch (error) {
-      setError('Error fetching the image');
+      const errorMsg =
+        error instanceof Error ? error.message : 'Error fetching the image';
+
+      setError(errorMsg);
       setAlertBarProps({
-        message: 'Error fetching the image',
+        message: errorMsg,
         severity: 'error',
       });
+      setLoading(false);
     } finally {
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    if (renderCountRef.current === 0) {
+    if (renderCountRef.current === 0 && !loading) {
       fetchRandomPicture();
     }
     renderCountRef.current += 1;
@@ -96,7 +93,7 @@ const DisplayRandomPicture = () => {
       )}
       <div>
         {loading && <span>Loading...</span>} Component Render Count:{' '}
-        {renderCountRef.current}
+        {renderCountRef.current + 1}
       </div>
 
       <SubmitButton
@@ -113,14 +110,54 @@ const DisplayRandomPicture = () => {
           Get Another Picture
         </Button>
       </SubmitButton>
-      <StyledRefreshButton onClick={fetchRandomPicture}>
-        <Avatar sx={{ width: 24, height: 24 }}>
-          <Autorenew />
-        </Avatar>
-      </StyledRefreshButton>
+      {imageUrl && (
+        <StyledRefreshButton onClick={fetchRandomPicture} loading={loading}>
+          <Avatar sx={{ width: 24, height: 24 }}>
+            <Autorenew />
+          </Avatar>
+        </StyledRefreshButton>
+      )}
       {renderAlertBar()}
     </Stack>
   );
 };
 
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const StyledRefreshButton = styled.div<{ loading?: boolean }>`
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 0.5rem !important;
+  pointer-events: ${({ loading }) => (loading ? 'none' : 'auto')};
+  opacity: ${({ loading }) => (loading ? '0.6' : '1')};
+  cursor: ${({ loading }) => (loading ? 'not-allowed' : 'pointer')};
+  svg {
+    width: 20px;
+    height: 20px;
+    animation: ${({ loading }) =>
+      loading
+        ? css`
+            ${spin} 2s linear infinite
+          `
+        : 'none'};
+  }
+  :hover {
+    svg {
+      path {
+        fill: ${purple[500]};
+      }
+    }
+    .MuiAvatar-circular {
+      background-color: ${purple[50]};
+    }
+  }
+`;
+
 export default DisplayRandomPicture;