Hi everyone,

I'm having an issue managing the loading state in my Next.js 14 app. When I change the font of a resume, the loading overlay stops before the async operation completes, making it disappear prematurely. I've placed the state update in the finally block, but it seems to get called before the UI updates.

Is this normal behavior, or am I doing something wrong? Any advice on ensuring the loading overlay stays visible until the async operation completes would be appreciated.

Here's a snippet of my code:

export async function changeResumeFont(resumeId: string, font: string) {
  await db.resume.update({
    where: { id: resumeId },
    data: { fontFamily: font },
  });
  revalidatePath(`/resume/${resumeId}`);
}

import React, { useState } from 'react';
import { Card, Text, SimpleGrid, Box, LoadingOverlay } from '@mantine/core';
import { changeResumeFont } from '../lib/actions'; // 

const fonts = [
  { name: 'Arial', value: 'Arial, sans-serif' },
  { name: 'Courier New', value: 'Courier New, monospace' },
];

const ResumeSettings = ({ resume }) => {
  const [fontLoading, setFontLoading] = useState(false);

  const handleFontChange = async (fontValue) => {
    setFontLoading(true);
    try {
      await changeResumeFont(resume.id, fontValue);
    } catch (error) {
      console.error('Failed to update font:', error);
    } finally {
      setFontLoading(false);
    }
  };

  return (
    <Card>
      <Box pos="relative">
        <LoadingOverlay visible={fontLoading} />
        <SimpleGrid cols={3} spacing="md">
          {fonts.map((font) => (
            <Card key={font.name} onClick={() => handleFontChange(font.value)}>
              <Text>{font.name}</Text>
            </Card>
          ))}
        </SimpleGrid>
      </Box>
    </Card>
  );
};

export default ResumeSettings;

The issue is that setFontLoading(false) gets called before the UI updates, causing the loading overlay to disappear prematurely.

Thanks in advance for your help!