How to use the @bentley/ui-core.SpinnerSize.Large function in @bentley/ui-core

private renderGathering() {
    // use a LoadSpinner();
    return (
      <div>
        <div>{this._i18n.translate("geoPhoto:LoadDialog.Finding")}</div>
        <div>
          
        </div>
        <div>{this._i18n.translate("geoPhoto:LoadDialog.FolderName", { folderName: this.state.folderName })}</div>
        <div>{this._i18n.translate("geoPhoto:LoadDialog.FolderCount", { count: this.state.folderCount })}</div>
        <div>{this._i18n.translate("geoPhoto:LoadDialog.FileCount", { count: this.state.fileCount })}</div>
      </div>
    );
  }

public render() {
    if (!this.state.modelReady) {
      return (
        <div>
          
        </div>
      );
    }

    const nodes = this.state.model.visible();
    if (nodes.length === 0) {
      return (
        <p>
          {this.props.nodeHighlightingProps ?
            UiComponents.translate("tree.noResultsForFilter", { searchText: this.props.nodeHighlightingProps.searchText }) :
            UiComponents.translate("general.noData")}
        </p>
      );
    }

    // This is a hack (since it doesn't have a proper public method) to force Virtualized List to clear cell cache.

public renderThumbnail() {
    if (this.state.waitingForThumbnail) {
      return (
        <div>
          
        </div>
      );
    } else if (this.props.iModel.thumbnail) {
      return (
        <div>
          <img src="{this.props.iModel.thumbnail}" id="base64image">
          <span>Open</span>
        </div>
      );
    } else {
      return (
        <div>
          <span>
          <span>Open</span>
        </span></div>
      );

{(this.state.projects && this.state.projects.length > 0) && this.state.projects.map((project: ProjectInfo) => (this.renderProject(project)))}
                <table>
                <thead>
                  <tr>
                    <th>Project Number</th>
                    <th>Project Name</th>
                    <th>Asset Type</th>
                    <th>Location</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
              {this.state.isLoading &amp;&amp;
                <div>
                  
                </div>
              }
              {(!this.state.isLoading &amp;&amp; (!this.state.projects || this.state.projects.length === 0)) &amp;&amp; <div>{this.getNoProjectsPrompt()}</div>}
            
          
        
      
    );
  }
}

private renderViews() {
    if (this.state.waitingForViews) {
      return (
        <div>
          
        </div>
      );
    } else if (this.state.views &amp;&amp; this.state.views.length &gt; 0) {
      return (
        <div>
          {this.state.views.map((view: ViewDefinitionProps, i: number) =&gt; (
            
          ))}
        </div>
      );
    } else {
      return (
        <div>
          There are no views defined.
        </div>
      );

public render() {
    return (
      <div>
        <div>
          
          <span>{this.props.prompt}</span>
        </div>
      </div>
    );
  }
}

const currTime = new Date();
  const diff = (currTime.getTime() - loadStart.getTime());

  const update = useForceUpdate();
  React.useEffect(() => {
    if (diff >= delay)
      return;
    const timer = setTimeout(update, diff);
    return () => clearTimeout(timer);
  });

  if (diff < delay)
    return null;

  return ();
};
const useForceUpdate = () => {

private _getSpinner() {
    return ;
  }

const Loader: React.FC = (props) => {
  if (props.loading) {
    return props.spinnerRenderer
      ? props.spinnerRenderer()
      : (
        <div>
          
        </div>
      );
  }
  if (props.noData) {
    return props.noDataRenderer
      ? props.noDataRenderer()
      : (
        <p>
          {UiComponents.translate("general.noData")}
        </p>
      );
  }

  return props.children;
};