SolidJSS
SolidJS•15mo ago•
30 replies
Cyber Grandma

SolidStart layout shifts using createAsync

Hi, I found out that I experience layout shifts whenever a createAsync is re-triggered.

For example here:

export default function ActivitySubmissions() {
  const [params, setParams] = createStore<ActivitySubmissionsParams>(
    structuredClone(defaultParams),
  );

  const data = createAsync(() => getActivitySubmissions({ ...params }));

  const pagination = () => data()?.pagination;
  const submissions = () => data()?.submissions;

  const setPage = (page: number) => {
    setParams('page', page);
  };

  return (
    <main class="mx-auto flex flex-col gap-8 py-8 sm:w-11/12">
      <TopBar />
      <div class="rounded-md bg-red-300 shadow-md min-h-[1000px]">
        {/* <Suspense fallback={<div>Loading...</div>}>
          <ActivitySubmissionsTable submissions={submissions()} />
        </Suspense> */}
      </div>

      <div class="flex justify-center ">
        <Pagination ...>
            <!-- Omitted -->
        </Pagination>
      </div>
    </main>
  );
}


I have a "middle div" colored in red here. Whenever I change one of the params (such as page or search filters), the createAsync is retriggered. But while it does that the middle part (in red) disappears for a split second and the page is re-scrolled back up. This makes using the pagination very obnoxious. Has anyone ever experienced that ? I don't understand why in this case it is needed for Solid to re-render the whole div each time.
Was this page helpful?