Spinner not showing on initial load

[Alexandre Pereira]

Hi Syncfusion,

The spinner is not showing on initial load, it shows fine after?

Am I doing anything wrong?

Cheers,

export default function RfcFormList() {
  const dataGrid = useRef<GridComponent | null>(null);
  const navigate = useNavigate();
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const [sortColumn, setSortColumn] = useState<"creationTime" | undefined>(
    undefined,
  );
  const [sortOrder, setSortOrder] = useState<"asc" | "desc" | undefined>(
    undefined,
  );
  const [createdBy, setCreatedBy] = useState<string | undefined>(undefined);
  const [from, setFrom] = useState<Date | undefined>(undefined);
  const [to, setTo] = useState<Date | undefined>(undefined);
  const defaultStatusSelected: RfcFormStatus[] = [
    RfcFormStatus.Draft,
    RfcFormStatus.HasError,
    RfcFormStatus.RequiresManualProcessing,
  ];
  const [statusSelected, setStatusSelected] = useState<RfcFormStatus[]>(
    defaultStatusSelected,
  );
  const defaultTypeSelected: RfcFormType[] = [RfcFormType.BackCharge];
  const [typesSelected, setTypesSelected] =
    useState<RfcFormType[]>(defaultTypeSelected);

  const createFormMutation = useMutation({
    mutationFn: ({ data }: { data: CreateRfcForm }) => createRfcFormAsync(data),
    onSuccess: (data: RfcFormDto) => {
      navigate(data.id);
    },
    onError: () => {
      ToastUtility.show(
        "Something wrong happened while creating your form.",
        "Error",
        20000,
      );
    },
  });

  const deleteFormMutation = useMutation({
    mutationFn: (id: string) => deleteRfcFormAsync(id),
    onError: (_, v) => {
      ToastUtility.show(
        `Something wrong happened while deleting the form ${v}`,
        "Error",
        20000,
      );
    },
  });
  const operationDisabled =
    createFormMutation.isLoading || deleteFormMutation.isLoading;

  const buttonItems: ItemModel[] = [
    {
      id: "backcharge",
      text: "Backcharge",
    },
    {
      id: "incorrect-customer",
      text: "Incorrect Customer",
    },
  ];

  useEffect(() => {
    refreshData()
  }, [
    page,
    pageSize,
    sortColumn,
    sortOrder,
    from,
    to,
    statusSelected,
    createdBy,
  ]);

  function refreshData() {
    console.log("Here...")
    if (dataGrid.current == null) {
      return;
    }
    
    getRfcFormListAsync({
      page,
      pageSize,
      sortColumn,
      sortOrder,
      from,
      to,
      statusSelected,
      createdBy,
    }).then((rfcForms) => {
      if (dataGrid.current && dataGrid.current.dataSource !== undefined) {
        dataGrid.current.dataSource = {
          result: rfcForms.items,
          count: rfcForms.totalCount,
        };
      }
    });
  }

  function dataStateChanged(args: any) {
    switch (args.action?.requestType) {
      case "paging":
        setPage(args.action.currentPage);
        setPageSize(args.action.pageSize);
        break;
      case "sorting":
        setSortColumn(args.action.columnName || undefined);
        setSortOrder(args.action.direction === "Ascending" ? "asc" : "desc");
        break;
      case "refresh":
        refreshData();
        break;
      default:
        break;
    }
  }

  function dataSourceChanged(args: any) {
    if (args.requestType == "delete") {
      for (let i = 0; args.data.length > i; i++) {
        deleteFormMutation.mutate(args.data[i].id);
      }
    }

    args.endEdit();
  }

  function newRfcSelected(args: any) {
    if (args.item.properties.id == "backcharge") {
      createFormMutation.mutate({ data: { type: RfcFormType.BackCharge } });
    }
  }

  function getRfcTypeDisplay(type: RfcFormType) {
    if (type === RfcFormType.BackCharge) {
      return "Backcharge";
    } else if (type === RfcFormType.IncorrectCustomer) {
      return "Incorrect Customer";
    }

    return "Unknown";
  }

  return (
    <div className="flex flex-col gap-y-3">
      <div className="flex justify-end">
        <DropDownButtonComponent
          select={newRfcSelected}
          items={buttonItems}
          cssClass="e-primary"
          disabled={operationDisabled}
        >
          New RFC
        </DropDownButtonComponent>
      </div>
      <Filters
        createdBy={createdBy}
        setCreatedBy={setCreatedBy}
        from={from}
        setFrom={setFrom}
        to={to}
        setTo={setTo}
        defaultStatusSelected={defaultStatusSelected}
        statusesSelected={statusSelected}
        setStatusesSelected={setStatusSelected}
        defaultTypeSelected={defaultTypeSelected}
        typesSelected={typesSelected}
        setTypesSelected={setTypesSelected}
        disabled={operationDisabled}
      />
      <GridComponent
        ref={dataGrid}
        allowSelection={true}
        pageSettings={{
          pageSize: pageSize,
          pageSizes: [10, 20, 50],
        }}
        dataStateChange={dataStateChanged}
        dataSourceChanged={dataSourceChanged}
        autoFit={true}
        allowPaging={true}
        toolbar={[ToolbarItem.ColumnChooser, ToolbarItem.Delete]}
        showColumnChooser={true}
        editSettings={{
          allowDeleting: true,
          showDeleteConfirmDialog: true,
        }}
        allowSorting={true}
        selectionSettings={{ checkboxOnly: true, persistSelection: true }}
      >
        <ColumnsDirective>
          <ColumnDirective
            type="checkbox"
            allowSorting={false}
            allowFiltering={false}
            width="60"
          />
          <ColumnDirective
            isPrimaryKey
            headerText="ID"
            field="id"
            allowSorting={false}
            visible={false}
          />
          <ColumnDirective
            headerText="Created By"
            width={350}
            template={(ctx: RfcFormDto) => {
              return <UserDisplay userId={ctx.createdBy} />;
            }}
          />
          <ColumnDirective
            headerText="Creation Time"
            field="creationTime"
            type="datetime"
            format="dd/MM/yyyy hh:mm a"
            allowSorting={true}
          />
          <ColumnDirective
            headerText="Type"
            template={(ctx: RfcFormDto) => {
              return <>{getRfcTypeDisplay(ctx.type)}</>;
            }}
            allowSorting={false}
          />
          <ColumnDirective
            headerText="Status"
            template={(ctx: RfcFormDto) => {
              return <RfcFormStatusBadge status={ctx.status} />;
            }}
          />
          <ColumnDirective
            headerText="Last Submitted By"
            width={350}
            template={(ctx: RfcFormDto) =>
              ctx.lastSubmittedBy ? (
                <UserDisplay userId={ctx.lastSubmittedBy} />
              ) : null
            }
            allowSorting={false}
            visible={false}
          />
          <ColumnDirective
            headerText="Submission Time"
            field="lastSubmissionTime"
            type="datetime"
            format="dd/MM/yyyy hh:mm a"
            allowSorting={false}
            visible={false}
          />
          <ColumnDirective
            headerText="Processing Time"
            field="lastProcessedTime"
            type="datetime"
            format="dd/MM/yyyy hh:mm a"
            allowSorting={false}
            visible={false}
          />

          <ColumnDirective
            headerText="Actions"
            width={120}
            template={(ctx: any) => {
              return (
                <div className="flex items-center gap-x-3">
                  <NavLink
                    to={ctx.id}
                    className="hover:underline text-primary-700"
                  >
                    <span>Navigate</span>
                  </NavLink>
                </div>
              );
            }}
          />
        </ColumnsDirective>
        <Inject services={[Page, Sort, Toolbar, ColumnChooser, Edit]} />
      </GridComponent>
    </div>
  );
}

[Johnson Soundararajan S]

Hi  Alexandre Pereira,

Thank you for reaching out to us.

We understand that when using custom binding, the grid does not initially show a loading spinner. This occurs because the data source is not assigned at the beginning, resulting in the message "No records to display." If you want to display the loading spinner, you can use the showSpinner() method within the created event.

Please refer to the below sample and code snippet for more information.

Code sample :

index.js

 

       function created() {

              grid.showSpinner();

       }

 

        <GridComponent

          dataSource={data}

          ref={(g) => (grid = g)}

          allowPaging={true}

          allowSorting={true}

          height={300}

          pageSettings={{ pageCount: 4, pageSize: 10 }}

          allowGrouping={true}

          dataStateChange={dataStateChange.bind(this)}

          created={created.bind(this)}

        >

 

Sample :  Tzn3qy (forked) - StackBlitz

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S