From d96da0df0b8ab281d7b50a1ca88f9b2484e20eb8 Mon Sep 17 00:00:00 2001
From: Marcelo Amorim <mamorim813@gmail.com>
Date: Fri, 4 Jul 2025 13:43:45 -0300
Subject: [PATCH] fix: hide loader overlay completely when content loads (#160)

---
 src/components/Image/index.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index 93558fc..a6edfc2 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -1,7 +1,7 @@
 import { Image, View } from 'react-native';
 import React, { FC, memo, useState } from 'react';
-import {
-  runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue,
+import Animated, {
+  runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue,
 } from 'react-native-reanimated';
 import { StoryImageProps } from '../../core/dto/componentsDTO';
 import Loader from '../Loader';
@@ -24,6 +24,10 @@ const StoryImage: FC<StoryImageProps> = ( {
   const duration = useSharedValue<number | undefined>( undefined );
   const isPaused = useDerivedValue( () => paused.value || !isActive.value );
 
+  const loaderHideStyle = useAnimatedStyle( () => ( {
+    opacity: loading.value ? 1 : 0,
+  } ) );
+
   const onImageChange = async () => {
 
     if ( !activeStory.value ) {
@@ -94,9 +98,9 @@ const StoryImage: FC<StoryImageProps> = ( {
 
   return (
     <>
-      <View style={ImageStyles.container}>
+      <Animated.View style={[ ImageStyles.container, loaderHideStyle ]}>
         <Loader loading={loading} color={color} size={50} />
-      </View>
+      </Animated.View>
       <View style={[ ImageStyles.image, mediaContainerStyle ]}>
         {data.data?.source && (
           data.isVideo ? (