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;