Update notification modal to avoid tile memory exceeding limits

package.json

@@ -29,6 +29,7 @@
     "dotenv": "^16.4.5",
     "electron-updater": "^6.1.7",
     "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
     "playwright": "^1.45.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",

src/renderer/src/input.css

@@ -22,16 +22,16 @@
 
 @keyframes spin {
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg) translateZ(0);
   }
 }
 
 .loader {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #4f46e5; /* Tailwind's indigo-600 */
+  border: 0.25rem solid rgba(0, 0, 0, 0.1); /* Use rem for scalable units */
+  border-left-color: #4f46e5;
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1.2s linear infinite;
-  will-change: transform; /* Hint to the browser to optimize this element */
+  width: 2rem;
+  height: 2rem;
+  animation: spin 1s linear infinite; /* Adjusted speed for smoother animation */
+  will-change: transform; /* Optimization hint */
 }

src/renderer/src/output.css

@@ -1324,20 +1324,21 @@ html {
 
 @keyframes spin {
   100% {
-    transform: rotate(360deg);
+    transform: rotate(360deg) translateZ(0);
   }
 }
 
 .loader {
-  border: 4px solid rgba(0, 0, 0, 0.1);
+  border: 0.25rem solid rgba(0, 0, 0, 0.1);
+  /* Use rem for scalable units */
   border-left-color: #4f46e5;
-  /* Tailwind's indigo-600 */
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1.2s linear infinite;
+  width: 2rem;
+  height: 2rem;
+  animation: spin 1s linear infinite;
+  /* Adjusted speed for smoother animation */
   will-change: transform;
-  /* Hint to the browser to optimize this element */
+  /* Optimization hint */
 }
 
 .hover\:bg-blue-100:hover {
@@ -1380,6 +1381,11 @@ html {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));

src/renderer/src/pages/Modals/NotificationModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useMemo } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { clearNotification, handleExit } from '../../reducers/statusReducer'
+import { clearNotification, handleExit, toggleNotifications } from '../../reducers/statusReducer'
 
 // eslint-disable-next-line react/display-name
 const Notification = React.memo(() => {
@@ -25,7 +25,7 @@ const Notification = React.memo(() => {
 
 const NotificationModal = () => {
   const dispatch = useDispatch()
-  const { isLoading, notification } = useSelector((state) => state.status)
+  const { isLoading, notification, showNotifications } = useSelector((state) => state.status)
 
   const handleClose = () => {
     dispatch(handleExit())
@@ -44,10 +44,19 @@ const NotificationModal = () => {
           </div>
         )}
 
-        {/* Notification Content */}
-        <div className="flex-grow overflow-y-auto max-h-48 w-full p-4 bg-gray-100 rounded-lg border border-gray-300">
-          <Notification />
-        </div>
+        <button
+          onClick={() => dispatch(toggleNotifications())}
+          className="text-blue-500 hover:text-blue-700 transition duration-150 ease-in-out focus:outline-none"
+        >
+          {showNotifications ? 'Hide Details' : 'Show Details ▼'}
+        </button>
+
+        {/* Conditional rendering based on toggle */}
+        {showNotifications && (
+          <div className="flex-grow w-full p-4 bg-gray-100 rounded-lg border border-gray-300 overflow-y-auto max-h-48">
+            <Notification />
+          </div>
+        )}
 
         <button
           onClick={handleClose}

src/renderer/src/reducers/statusReducer.js

@@ -1,8 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { openModal } from './modalReducer'
+import { throttle } from 'lodash'
 
 const initialState = {
   isLoading: false,
+  showNotifications: false,
   notification: []
 }
 
@@ -19,21 +21,26 @@ const statusSlice = createSlice({
     clearNotification: (state) => {
       state.notification = []
     },
+    toggleNotifications: (state) => {
+      state.showNotifications = !state.showNotifications
+    },
     handleExit: (state) => {
       return initialState
     }
   }
 })
 
+const throttledDispatch = throttle((dispatch, notification) => {
+  dispatch(addNotification(notification))
+}, 500) // Throttle interval is 500 ms
+
 export const triggerNotification = (payload) => (dispatch) => {
   dispatch(openModal({ type: 'NOTIFICATION' }))
 
-  dispatch(
-    addNotification({
-      message: payload.message,
-      type: payload.type
-    })
-  )
+  throttledDispatch(dispatch, {
+    message: payload.message,
+    type: payload.type
+  })
 }
 
 export const triggerLoading = (isLoading) => (dispatch) => {
@@ -43,5 +50,6 @@ export const triggerLoading = (isLoading) => (dispatch) => {
   }
 }
 
-export const { setLoading, addNotification, clearNotification, handleExit } = statusSlice.actions
+export const { setLoading, addNotification, clearNotification, toggleNotifications, handleExit } =
+  statusSlice.actions
 export default statusSlice.reducer