git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance loading states with dynamic messages in FormatPage and RegexPage components

Browse Source
This commit is contained in:
Sam Chau
2025-01-09 17:33:32 +10:30
parent 38a978146f
commit 2c19df5503
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/format/FormatPage.jsx
View File

@@ -14,11 +14,24 @@ import ImportModal from '@ui/ImportModal';
import {importFormats} from '@api/import';
import DataBar from '@ui/DataBar/DataBar';
const loadingMessages = [
'Formatting the formatters...',
'Teaching formats to behave...',
'Convincing formats to follow rules...',
'Organizing chaos into patterns...',
'Making formats look pretty...',
'Polishing the quality filters...'
];
const LoadingState = () => (
<div className='w-full min-h-[70vh] flex flex-col items-center justify-center'>
<Loader className='w-8 h-8 animate-spin text-blue-500 mb-4' />
<p className='text-lg font-medium text-gray-300'>
Loading custom formats...
{
loadingMessages[
Math.floor(Math.random() * loadingMessages.length)
]
}
</p>
</div>
);

15
frontend/src/components/regex/RegexPage.jsx
View File

@@ -9,11 +9,24 @@ import {useKeyboardShortcut} from '@hooks/useKeyboardShortcut';
import MassActionsBar from '@ui/MassActionsBar';
import DataBar from '@ui/DataBar/DataBar';
const loadingMessages = [
'Matching all the patterns...',
'Capturing your groups...',
'Escaping special characters...',
'Untangling regular expressions...',
'Looking behind and ahead...',
'Validating the validators...'
];
const LoadingState = () => (
<div className='w-full min-h-[70vh] flex flex-col items-center justify-center'>
<Loader className='w-8 h-8 animate-spin text-blue-500 mb-4' />
<p className='text-lg font-medium text-gray-300'>
Loading regex patterns...
{
loadingMessages[
Math.floor(Math.random() * loadingMessages.length)
]
}
</p>
</div>
);