Relay, a JavaScript framework used for fetching and updating GraphQL data in React, optimizes data fetching by allowing developers to declare data requirements per component. At Tines, Relay is used for the Storyboard component, which involves fetching data in three main chunks: "Story", "Story Runs", and "Form". Initially implemented using the useLazyLoadQuery hook, this approach led to significant load times and a single loading indicator due to a parent query that required all data to be fetched before rendering. To improve performance and user experience, the solution transitioned to using parallel queries with the usePreloadedQuery and useQueryLoader hooks, allowing each data chunk to load independently and display once ready, thus reducing loading times and decoupling components. This method also introduces distinct suspense states for each data chunk, enabling tailored loading states that align with design requirements and enhancing component readability and maintainability.