Standardization

src/components/Applications/AppItem.tsx

@@ -29,7 +29,7 @@ export function AppItem({
 	const { ref, width, height } = useElementSize();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const Icon = allIcons[icon];
-	const { isMobile, filter } = useCommonHooks();
+	const { isMobile, iconFilter } = useCommonHooks();
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 	const [hover, setHover] = useState<boolean>(false);
 	const validUrl =
@@ -102,7 +102,7 @@ export function AppItem({
 						style={{
 							height: scale * 32,
 							width: scale * 32,
-							filter: filter(selectedTheme),
+							filter: iconFilter(selectedTheme),
 						}}
 					/>
 				)}

src/components/DataTable/DataTable.tsx

@@ -22,6 +22,7 @@ export function DataTable({
 	filtersEnabled,
 	globalFilter,
 	setGlobalFilter,
+	isRefreshing,
 }: {
 	data: any[];
 	columns: any[];
@@ -30,6 +31,7 @@ export function DataTable({
 	filtersEnabled: boolean;
 	globalFilter: string;
 	setGlobalFilter: Dispatch<SetStateAction<string>>;
+	isRefreshing?: boolean;
 }) {
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 	const table = useReactTable({
@@ -192,7 +194,11 @@ export function DataTable({
 						</tr>
 					))}
 				</tbody>
-				<tfoot>
+				<tfoot
+					style={{
+						transition: 'all 1s ease',
+					}}
+				>
 					{table.getFooterGroups().map((footerGroup) => (
 						<tr key={footerGroup.id}>
 							{footerGroup.headers.map((header) => (
@@ -223,6 +229,29 @@ export function DataTable({
 							</Text>
 						</td>
 					</tr>
+					<tr
+						style={{
+							width: '100%',
+							backgroundColor: 'var(--mantine-color-accent-0)',
+							position: 'absolute',
+							bottom: isRefreshing ? 0 : -30,
+							transition: 'all 1.5s ease-in-out',
+							placeContent: 'center',
+							display: 'flex',
+						}}
+					>
+						<td colSpan={5} width={'100%'} style={{}}>
+							<Text
+								style={{
+									color: 'var(--mantine-color-background-0)',
+									fontWeight: 'bold',
+									textAlign: 'center',
+								}}
+							>
+								Updating
+							</Text>
+						</td>
+					</tr>
 				</tfoot>
 			</table>
 		</ScrollArea>