How to show and hide loading image

[Fredrick_Esedo]

I need to show and hide a loading image as my records is being fetched from airtable using the documentation code below

import { Loader } from "@airtable/blocks/ui";
const loaderExample = <Loader scale={0.3} />;

here is my code. can someone help me

access.js

import {initializeBlock, Loader, useBase, useRecords, table} from '@airtable/blocks/ui';
import React, { Component } from "react";
import {base} from '@airtable/blocks';

function Access (){ 
const base = useBase();
 const tab = base.getTableByNameIfExists('empoyee_table');
 const records = useRecords(tab);
return (
         <ul>

   <h1>Show Employee Records</h1> <br />

             {records.map(record => {

                 return <li key={record.id}>{record.id}</li>
             })}
         </ul>
     );
} 
  
initializeBlock(() => <Access />);

export default Access;