Jeffrey Posts - Answer Overflow

Jeffrey

Explore posts from servers

•Created by Jeffrey on 9/7/2024 in #✋｜help

Problem with exceeding limits

I'm on the $5 hobby plan, and I have a project that has two PostgreSQL and two Github Repo in Golang, all says "Paused for exceeding limits". What actions should I take? I can't seem to find more detail about what limits I have exceeded. I've looked at Metrics in each service detail sheet, observability page, project usage in project settings page, and usage in account settings page. Besides couldn't finding the details for exceeding limits, what actions should I take? I can't seem to delete each service, as that button is disabled somehow for all four services. How can I redeploy a new version of my golang project on github? I've pushed 10-20 small commits to one of the github golang project during that past few days, could that be one of the limits I exceed? Overall, I'm just confused about what's causing the problem and what actions I should take to redeploy.

42 replies

TTCTheo's Typesafe Cult

•Created by Jeffrey on 7/3/2024 in #questions

Most Performant Way of Implementing Dialog/Sheet for Row Click in a large DataTable

What's the most efficient way to displaying a large data table and display a dialog upon clicking each row for detail in react? I'm using Sheet and DataTable component from Shadcn. I tried memoized the DataTable, and wrapping the DataTable with Sheet:

const [sheetState, setSheetState] = useState<{
  open: boolean;
  playerId?: string;
}>({ open: false, playerId: undefined });

...
<Sheet
  open={sheetState.open}
  onOpenChange={(open) => setSheetState({ open })}
>
  <div>PlayerId: {sheetState.playerId}</div>
  <DataTable
    columns={columnDefs}
    data={displayData}
    onRowClick={handleRowClick}
  />
  <SheetContent>
    {sheetState.playerId && (
      <PlayerDetailContent playerId={sheetState.playerId} />
    )}
  </SheetContent>
</Sheet>

const [sheetState, setSheetState] = useState<{
  open: boolean;
  playerId?: string;
}>({ open: false, playerId: undefined });

...
<Sheet
  open={sheetState.open}
  onOpenChange={(open) => setSheetState({ open })}
>
  <div>PlayerId: {sheetState.playerId}</div>
  <DataTable
    columns={columnDefs}
    data={displayData}
    onRowClick={handleRowClick}
  />
  <SheetContent>
    {sheetState.playerId && (
      <PlayerDetailContent playerId={sheetState.playerId} />
    )}
  </SheetContent>
</Sheet>

However, the click event is still dependent on the size of the table, with 1k rows taking around 1 seconds. I tried commenting out <SheetContent>...</SheetContent>, and it drastically improved the speed to seem almost instant (under 100ms). Why is that? Also, once I refresh the page, the first row click took several seconds and the later ones took under 100ms (with SheetContent commented out), is this a dev server behavior? If not, what would be the reason for this delay? What's the most performant way in this situation?

6 replies

Gaming

Programming